0

On button click I just want to put element in the canvas, but it's not working. Here is the code I have written:

<script language="javascript" type="text/javascript"> function image() { var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.clear(); ctx.setTransform(-1, 0, 0, 1, 200, 200); context.clear(true) var imgobj=new Image(); imgobj.onload=function() { ctx.drawImage(imgobj,69,50); } imgobj.src='images.jpg'; } function circle() { var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.clear(); // do some more drawing ctx.setTransform(-1, 0, 0, 1, 200, 200); // do some drawing with the new transform context.clear(true); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); } function line() { var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.clear(); // do some more drawing ctx.setTransform(-1, 0, 0, 1, 200, 200); // do some drawing with the new transform context.clear(true); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); </script> </head> <body> <h1>Demo of HTM5</h1> <div class="canvas1" align="left"> <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"> </canvas> <p><button onclick="circle()"> Draw Circle</button></p> <p><button onclick="line()"> Draw Line</button></p> <p><button onclick="image()"> Display Image</button></p> </div> </body> </html>
Improve this question
2
  • Check the syntax of your onclick= lines. You're looking for something more like: onclick=function() { circle(); }. Commented Jan 29, 2014 at 5:06
  • I did that also bt still its not working... Commented Jan 29, 2014 at 19:06

2 Answers 2

Reset to default
2

There is no ctx.clear() method on the context object, try instead with:

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

You are also using an unassigned context which you should remove.

Also there is no need to look-up canvas inside the function each time, just do it once in global scope.

And also, in your line method you're missing a beginPath() call.

See fiddle here

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); function image() { /// use this to clear canvas ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.setTransform(-1, 0, 0, 1, 200, 200); var imgobj = new Image(); imgobj.onload = function () { ctx.drawImage(imgobj, 69, 50); } imgobj.src = 'images.jpg'; } function circle() { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // do some more drawing ctx.setTransform(-1, 0, 0, 1, 200, 200); // do some drawing with the new transform ctx.beginPath(); ctx.arc(95, 50, 40, 0, 2 * Math.PI); ctx.stroke(); } function line() { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // do some more drawing ctx.setTransform(-1, 0, 0, 1, 200, 200); // do some drawing with the new transform ctx.beginPath(); /// add a beginPath here ctx.moveTo(0, 0); ctx.lineTo(200, 100); ctx.stroke(); }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

I think, you are using some wrong approach to clear the canvas. There is no method clear for canvas to clear it.

instead you should use: .clearRect(0, 0, 300, 300);

Here is the sample code:

function circle(){ var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.clearRect(0, 0, 300, 300); // do some more drawing ctx.setTransform(-1, 0, 0, 1, 200, 200); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); } function line(){ var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); ctx.clearRect(0, 0, 300, 300); ctx.setTransform(-1, 0, 0, 1, 200, 200); // do some drawing with the new transform ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(200,100); ctx.stroke(); }

jsfiddle: http://jsfiddle.net/FumBm/3/

Also, there is no variable with name context in your script. :)

Improve this answer

1 Comment

See the jsfiddle I have provided, that will help you to track you error.