DavidInLove
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.
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
And with your code JQUERY the canvas is displayed without clicking.
It is exactly what I wanted.
See you, David