Link to home
Start Free TrialLog in
Avatar of DavidInLove
DavidInLoveFlag for France

asked on

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>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of DavidInLove

ASKER

Yes, thank you!
And with your code JQUERY the canvas is displayed without clicking.
It is exactly what I wanted.
See you, David