Solved

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

Posted on 2014-02-08
2
416 Views
Last Modified: 2014-02-08
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

0
Comment
Question by:DavidInLove
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39843990
you may hide the image with CSS : http://jsfiddle.net/kyMsW/1/
0
 

Author Closing Comment

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

Featured Post

Application Discovery Service in AWS

In the era of the cloud, customers migrating away from their existing on-premise infrastructure. This requires lots of planning, strategies, and effort to identify their existing resources and determine how best to migrate.  Datacenter migrations happen in four phases -

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

627 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question