Java Script html5 Canvas

Question

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>

Check the syntax of your onclick= lines. You're looking for something more like: onclick=function() { circle(); }. — Scott Mermelstein
– Scott Mermelstein, Commented Jan 29, 2014 at 5:06

score 2 · Accepted Answer · 2014-01-29 05:14:14Z

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();
}

Ashish Kumar · Accepted Answer · 2014-01-29 05:17:18Z

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. :)

answered Jan 29, 2014 at 5:17

Ashish Kumar

3,0393 gold badges20 silver badges27 bronze badges

1 Comment

Ashish Kumar Over a year ago

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

Collectives™ on Stack Overflow

Java Script html5 Canvas

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related