How to load a CANVAS from an image stored on server but not displayed in the HTML DOM

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.

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>

  4.     <title>ANIMATION with timer: a solution very difficult to apply</title>
  5.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
  7.  </head>
  8.   <body>
  9.   
  10.   <img id = "img_src13" src="http://www.thecacaocafe.com/img/test.png"  width="448">
  11.   
  12.   <br>
  13.   
  14.   AAAA
  15.  <canvas id="myCanvas_IN" width="448" height="448"></canvas><br>
  16.  
  17.  

  18. <script>
  19. $(function() {
  20.  
  21. $("#img_src13").click( function()
  22. {
  23. run1=0;
  24. canvas_in = $("#myCanvas_IN");
  25. canvasinPosition = {
  26. x: canvas_in.offset().left,
  27. y: canvas_in.offset().top
  28. };
  29. num = 1;
  30. img_srcin="img_src13";
  31. elemin = document.getElementById("myCanvas_IN");
  32. if (elemin && elemin.getContext) 
  33. {
  34.   contextin = elemin.getContext("2d");
  35.  if (contextin) 
  36. {

  37. imgin=document.getElementById(img_srcin);
  38. contextin.drawImage(imgin,0,0);
  39. }
  40. }
  41. imgdin = contextin.getImageData(0, 0, 448, 448);
  42. pixin = imgdin.data;
  43. });
  44. });

  45.     
  46.     </script>
  47.   </body>
  48. </html>


David  ( @webtecgeek   www.thecacaocafe.com )