How to load a CANVAS from an image stored on server but not displayed in the HTML DOM
Hello,
I have a code here where I display an image and when I click on it,
it becomes a canvas.
It is OK but I want in my website to display only the CANVAS .
Is there a way to load the canvas without displaying the image it comes from on the screen?
Thanks for any help.
- <!DOCTYPE html>
- <html>
- <head>
- <title>ANIMATION with timer: a solution very difficult to apply</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
- </head>
- <body>
-
- <img id = "img_src13" src="http://www.thecacaocafe.com/img/test.png" width="448">
-
- <br>
-
- AAAA
- <canvas id="myCanvas_IN" width="448" height="448"></canvas><br>
-
-
-
- <script>
- $(function() {
-
- $("#img_src13").click( function()
- {
- run1=0;
- canvas_in = $("#myCanvas_IN");
- canvasinPosition = {
- x: canvas_in.offset().left,
- y: canvas_in.offset().top
- };
- num = 1;
- img_srcin="img_src13";
- elemin = document.getElementById("myCanvas_IN");
- if (elemin && elemin.getContext)
- {
- contextin = elemin.getContext("2d");
- if (contextin)
- {
- imgin=document.getElementById(img_srcin);
- contextin.drawImage(imgin,0,0);
- }
- }
- imgdin = contextin.getImageData(0, 0, 448, 448);
- pixin = imgdin.data;
- });
- });
-
- </script>
- </body>
- </html>
David ( @webtecgeek www.thecacaocafe.com )