Jump to content

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


Recommended Posts

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>
Link to comment
Share on other sites

you can use CSS to set


to hide the img tag, then switch the onclick handler to the document.ready handler so that the canvas loads automatically when the page's DOM is "ready".

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...