Change the background of canvas element to url - javascript

So what I want to do is I want to change the HTML line of code from
<canvas id="canvas" width="1000" height="500" class="canvas"></canvas>
to have a style attribute added to look like this:
<canvas id="canvas" width="1000" height="500" class="canvas" style="background: url(SOMEURL);"></canvas>
The JavaScript I have tried is this:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
Then inside a function That I call after 4 seconds I have:
canvas.style.backgroundImage =
'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAH0CAYAAACuKActAAAI4ElEQVR4nO3c0WnDMBSG0X+mrJId+pxBPIgH8SRZRH1RwA2GUNxyb9NzQGDHljF5+xByAgAAAAAAAAAAAAAAf8tIriMZB+P2zecsv/WOAAAA8K+M5F4xFwAAANh5juyRrLsV9XX325fjkWzznq3ivQEAAOCt7AN9JLdHiM/zdSTXebzNsR7NBQAAAE54CvTlYF/6Mq9d5vnlaC4AAABwwsEK+uGH30Zynx+Xux/NBQAAAE54sQd9zGjfdivpy2PfuT3oAAAAcMJIPt5hVP+PAAAAcEp1WAt0AAAAiEAHAACAFqrDWqADAABABDoAAAC0UB3WAh0AAAAi0AEAAKCF6rAW6AAAABCBDgAAAC1Uh7VABwAAgAh0AAAAaKE6rAU6AAAARKADAABAC9VhLdABAAAgAh0AAABaqA5rgQ4AAAAR6AAAANBCdVgLdAAAAIhABwAAgBaqw1qgAwAAQAQ6AAAAtFAd1gIdAAAAItABAACgheqwFugAAAAQgQ4AAAAtVIe1QAcAAIAIdAAAAGihOqwFOgAAAESgAwAAQAvVYS3QAQAAIAIdAAAAWqgOa4EOAAAAEegAAADQQnVYC3QAAACIQAcAAIAWqsNaoAMAAEAEOgAAALRQHdYCHQAAACLQAQAAoIXqsBboAAAAEIEOAAAALVSHtUAHAACACHQAAABooTqsBToAAABEoAMAAEAL1WEt0AEAACACHQAAAFqoDmuBDgAAABHoAAAA0EJ1WAt0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB+wicgsAnCtx8FrwAAAABJRU5ErkJggg==);';
But after the line of code gets run it now looks like:
<canvas id="canvas" width="1000" height="500" class="canvas" style=""></canvas>
The style is just blank. What I am I doing wrong? Thanks. Will pick the best answer. Thanks!

You can use jQuery for that and set the background property to desired url of your canvas element. In your case, a base64 image. Example:
setTimeout(function() {
$('#canvas').css('background',"url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAH0CAYAAACuKActAAAI4ElEQVR4nO3c0WnDMBSG0X+mrJId+pxBPIgH8SRZRH1RwA2GUNxyb9NzQGDHljF5+xByAgAAAAAAAAAAAAAAf8tIriMZB+P2zecsv/WOAAAA8K+M5F4xFwAAANh5juyRrLsV9XX325fjkWzznq3ivQEAAOCt7AN9JLdHiM/zdSTXebzNsR7NBQAAAE54CvTlYF/6Mq9d5vnlaC4AAABwwsEK+uGH30Zynx+Xux/NBQAAAE54sQd9zGjfdivpy2PfuT3oAAAAcMJIPt5hVP+PAAAAcEp1WAt0AAAAiEAHAACAFqrDWqADAABABDoAAAC0UB3WAh0AAAAi0AEAAKCF6rAW6AAAABCBDgAAAC1Uh7VABwAAgAh0AAAAaKE6rAU6AAAARKADAABAC9VhLdABAAAgAh0AAABaqA5rgQ4AAAAR6AAAANBCdVgLdAAAAIhABwAAgBaqw1qgAwAAQAQ6AAAAtFAd1gIdAAAAItABAACgheqwFugAAAAQgQ4AAAAtVIe1QAcAAIAIdAAAAGihOqwFOgAAAESgAwAAQAvVYS3QAQAAIAIdAAAAWqgOa4EOAAAAEegAAADQQnVYC3QAAACIQAcAAIAWqsNaoAMAAEAEOgAAALRQHdYCHQAAACLQAQAAoIXqsBboAAAAEIEOAAAALVSHtUAHAACACHQAAABooTqsBToAAABEoAMAAEAL1WEt0AEAACACHQAAAFqoDmuBDgAAABHoAAAA0EJ1WAt0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB+wicgsAnCtx8FrwAAAABJRU5ErkJggg==)");
}, 4000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="1000" height="500" class="canvas" style="background: url('https://i.imgur.com/FUsyxR5.jpg');"></canvas>

Related

Getting 2 canvas images to appear with 1 button

I'm trying to get multiple canvas images to appear with 1 button press. I can get one image to work perfect, but the second one I can't. I know that ID's have to be unique and that only the first canvas will have an image currently.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<div class="bg">
<img src="Assets/Images/background.png" alt="background">
</div>
<section class="content">
<img id="taxi" src="Assets/Images/PV.png" width="106" height="53">
<canvas id="myCanvas" width="106" height="53"
style="border:1px solid #d3d3d3; position:absolute; left:510px;top:117px;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="myCanvas" width="106" height="53"
style="border:1px solid #d3d3d3; position:absolute; left:310px;top:117px;">
Your browser does not support the HTML5 canvas tag.</canvas>
<p><button onclick="myCanvas()">Try it</button></p>
</section>
</body>
</html>
JS
function myCanvas() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("taxi");
ctx.drawImage(img,0,0,106,53);
}
I know that I can get it work by changing one the id="myCanvas" in the HTML and repeating the current lines in the script to get it to work. But the end web page will have lots of canvas' and I didn't want to keep repeating the javascript code.
Is there a simple way of doing what I am trying to achieve?
HTML elements cannot have the same id. You'll need to retrieve your elemnts some other way. There are many ways; getElementsByTagName, getElementsByClassName, querySelectorAll, ... etc.
Use querySelectorAll(".content > canvas"); This will select all direct children that are canvas elements in the element that has the class of "content" (which in this case is your section element).
function myCanvas() {
document.querySelectorAll(".content > canvas").forEach(c=>{
var ctx = c.getContext("2d");
var img = document.getElementById("taxi");
ctx.drawImage(img,0,0,106,53);
});
}
Basic example:
function myCanvas() {
document.querySelectorAll(".content > canvas").forEach(c=>{
var ctx = c.getContext("2d");
var img = document.getElementById("taxi");
ctx.drawImage(img,0,0,106,53);
});
}
<section class="content">
<img id="taxi" src="https://static-s.aa-cdn.net/img/ios/899287106/45820b5b6bba46c7fcd853a46d554a34?v=1" width="106" height="53">
<canvas width="106" height="53" style="border:1px solid #d3d3d3; position:absolute; left:510px;top:117px;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas width="106" height="53" style="border:1px solid #d3d3d3; position:absolute; left:310px;top:117px;">
Your browser does not support the HTML5 canvas tag.</canvas>
<p><button onclick="myCanvas()">Try it</button></p>
</section>

Draw a pendulum using DOM

Here is the code, I am drawing 2 circles and 2 lines and an additional line appears parallel to second line.Here is a screenshot
<html>
<head>
<body>
<canvas id="Panel" height=500 width=500 style ="border: 1px dotted green">
</canvas>
</body>
<script>
var canvas = document.getElementById("Panel");
var draw = canvas.getContext("2d");
draw.beginPath();
draw.arc(canvas.width/2,100,10,2*Math.PI,false);
draw.fillSytle="black";
draw.fill();
draw.arc(canvas.width/2,200,10,2*Math.PI,false);
draw.fillSytle="black";
draw.fill();
draw.moveTo(canvas.width/2,0);
draw.lineTo(canvas.width/2,100);
draw.moveTo(canvas.width/2,100);
draw.lineTo(canvas.width/2,200);
draw.stroke();
</script>
</head>
</html>
Check the snippet below. You just need to draw two separate forms
var canvas = document.getElementById("Panel");
var draw = canvas.getContext("2d");
draw.beginPath();
draw.arc(canvas.width/2 -50,200,10,2*Math.PI,false);
draw.fillSytle="black";
draw.fill();
draw.moveTo(canvas.width/2 -50,0);
draw.lineTo(canvas.width/2 -50,200);
draw.stroke();
var draww = canvas.getContext("2d");
draww.beginPath();
draww.arc(canvas.width/2 +50,200,10,2*Math.PI,false);
draww.fillSytle="black";
draww.fill();
draww.moveTo(canvas.width/2 +50,0);
draww.lineTo(canvas.width/2 +50,200);
draww.stroke();
<canvas id="Panel" height=500 width=500 style ="border: 1px dotted green">
</canvas>

HTML text doesn't print to screen when using canvas in conjunction

In this snippet of code, even though I align the text far outside of the canvas boundaries, the text shows up below the canvas height. I'm new to HTML and I question why using a canvas seems to block the whole row it's on. I also want to know if there is a way around this, so I can have my canvas and have the text to the right of it on the same row.
<!DOCTYPE html>
<html>
<canvas id= "myCanvas" width="600" height="600">
</canvas>
<head>
<title>test</title>
<meta name="generator" content="BBEdit 11.6" />
</head>
<body>
<p style="text-align:right">JavaScript can change the content of an HTML element:</p>
</body>
</html>
<!DOCTYPE html>
<html>
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #000000;">
</canvas>
<head>
<title>test</title>
<meta name="generator" content="BBEdit 11.6" />
</head>
<body>
<p style="text-align:right; display: inline-block;">JavaScript can change the content of an HTML element:</p>
</body>
</html>
First your code is some wrong, you need to follow a structure.
<!DOCTYPE html>
<html>
<head>
<!-- Code -->
</head>
<body>
<!-- Code -->
</body>
</html>
Your canvas you need to write inside body tag.
You have many options but each options have differences, depend of what you want to do after, you can to choose :
float, inline, inline-block or inline-flex
Float:
This is the old form, that make an element float.
<canvas style="float:left; border:1px solid red;" id= "myCanvas" width="30" height="30">
</canvas>
<p style="text-align:right">JavaScript can change the content of an HTML element:</p>
Inline:
Element in one line but doesn't respect the width and height property of the element.
<canvas style="border:1px solid red;" id= "myCanvas" width="30" height="30">
</canvas>
<p style="display:inline;">JavaScript can change the content of an HTML element:</p>
Inline-block:
Element in one line respecting the width and height property of the element.
<canvas style="border:1px solid red;" id= "myCanvas" width="30" height="30">
</canvas>
<p style="display:inline-block;">JavaScript can change the content of an HTML element:</p>
Inline-Flex:
Introduced in css3, inline in version flex.
<canvas style="border:1px solid red;" id= "myCanvas" width="30" height="30">
</canvas>
<p style="display:inline-flex;">JavaScript can change the content of an HTML element:</p>
The definitions are very quickly, refer more information:
Reference 1
Reference 2
Update:
Align in the top, using flex:
<div style="display:flex;align-self: flex-start">
<canvas style="border:1px solid red;" id= "myCanvas" width="100" height="100">
</canvas>
<p style="margin-top:0">JavaScript can change the content of an HTML element:</p>
</div>

Copy dynamic canvas into another canvas not working

I`m dealing with a video communication based on canvas.
Today, I meet a weird bug when I try to capture the video into another canvas. It sometimes worked, but sometimes not.
Here`s the code.
$('#snap-button').on('click', function () {
var source = $('#video')[0];
var target = $('#photo')[0];
var context = target.getContext('2d');
context.drawImage(source, 0, 0, 800, 600);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- video -->
<canvas id="video" width="800" height="600"></canvas>
<!-- snapshot -->
<canvas id="photo" width="800" height="600"></canvas>
<button id="snap-button"></button>
```
But when I test this bug, I replace the video canvas with static canvas, such as draw a retangle, it worked 100% correctly, but dynamic is almost not worked.
What should I do ? Thanks!
Edit this code below how you want. This is working example how you can make snapshot from video into canvas.
var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
$("#snap-button").click(function(){
ctx.drawImage(v,5,5,260,125)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Video to use:</p>
<video id="video1" controls width="270" autoplay>
<source src="http://www.w3schools.com/tags/mov_bbb.mp4" type='video/mp4'>
<source src="http://www.w3schools.com/tags/mov_bbb.ogg" type='video/ogg'>
<source src=http://www.w3schools.com/tags/"mov_bbb.webm" type='video/webm'>
</video>
<p>Snapshot:</p>
<canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;"></canvas>
<br><br>
<input type="button" id="snap-button" value="Snap shot">
Source: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage_video

How to change canvas image on click?

I am trying to change the image of canvas on click according to count of click being even or odd.
Basically i want to make a zero and cross game in which image on canvas changes to a cross or zero depending upon the count of mouse click.How to track count of click on canvas? Please help.
Please guide me as i am a beginner in html.
<!DOCTYPE html>
<head>
<title> samp1 </title>
</head>
<body>
<canvas id="mycanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
<style>
#mycanvas {
margin-top:10px;
margin-left:10px;
}
</style>
<img src="http://images.all-free- download.com/images/graphicthumb/roses_554954.jpg" id="my" width="200" height="100"/>
<img src="http://images.all-free-download.com/images/graphicthumb/flower_lighting_554944.jpg" id="ny" width="200" height="100"/>
<script>
var i=0;
function fn(){
if(i%2==0)
ctx.drawImage(im,0,0,can.width,can.height);
else
ctx.drawImage(in,0,0,can.width,can.height);
i++;}
var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
var im=document.getElementById("my");
var in=document.getElementById("ny");
can.addEventListener("click", fn, false);
</script>
</body>
</html>
I see 2 very small errors:
'in' is a reserved word in javascript.
you have a space in the URL for the 'my' img element
With those corrected your codes should work the way you want.
Here is a fiddle to demonstrate:
http://jsfiddle.net/w09tyftt/1/
<style>
#mycanvas {
margin-top:10px;
margin-left:10px;
}
</style>
<canvas id="mycanvas" width="200" height="100" style="border:1px solid #000000;">
<img src="http://images.all-free-download.com/images/graphicthumb/roses_554954.jpg" id="my" width="200" height="100" />
<img src="http://images.all-free-download.com/images/graphicthumb/flower_lighting_554944.jpg" id="ny" width="200" height="100" />
<script>
var i = 0;
function fn() {
if (i % 2 == 0) ctx.drawImage(im, 0, 0, can.width, can.height);
else ctx.drawImage(vin, 0, 0, can.width, can.height);
i++;
}
var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
var im = document.getElementById("my");
var vin = document.getElementById("ny");
can.addEventListener("click", fn, false);
</script>

Categories

Resources