CODEWITHSUNDEEP
javascripthtmlcanvas
user3247321
user3247321

Reputation:

Java Script html5 Canvas

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>

Upvotes: 0

Views: 313

Answers (2)

Ashish Kumar
Ashish Kumar

Reputation: 3039

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

Upvotes: 0

user1693593
user1693593

Reputation:

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

Upvotes: 2

Related Questions