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


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>

    <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=""></script> 
  <img id = "img_src13" src=""  width="448">
 <canvas id="myCanvas_IN" width="448" height="448"></canvas><br>

$(function() {
	$("#img_src13").click( function()
		canvas_in = $("#myCanvas_IN");
		canvasinPosition = {
			x: canvas_in.offset().left,
			y: canvas_in.offset().top
		num = 1;	
		elemin = document.getElementById("myCanvas_IN");
		if (elemin && elemin.getContext) 
			   contextin = elemin.getContext("2d");
			  if (contextin) 

		 imgdin = contextin.getImageData(0, 0, 448, 448);
		 pixin =;


Open in new window

Who is Participating?
leakim971Connect With a Mentor PluritechnicianCommented:
you may hide the image with CSS :
DavidInLoveAuthor Commented:
Yes, thank you!
And with your code JQUERY the canvas is displayed without clicking.
It is exactly what I wanted.
See you, David
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.