www.webdeveloper.com
Results 1 to 3 of 3

Thread: i dont know how to clear the screen properly whnever i do so i cant redraw the shapes

  1. #1
    Join Date
    Aug 2014
    Posts
    2

    i dont know how to clear the screen properly whnever i do so i cant redraw the shapes

    i cant redraw the shapes again
    the code:

    <html>
    <body>

    <canvas id="myCanvas" width="1300" height="650" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>

    <script>


    function inform(){
    alert("You have activated me by clicking the grey button! Note that the event handler is added within the event that it handles, in this case, the form button event tag")
    }

    var Rectangle = function (x,y,height) {
    this.x = x;
    this.y =y;
    this.width=150;
    this.height=height;

    Rectangle.prototype.Draw = function(ctx)
    {
    ctx.rect(this.x,this.y,this.width,this.height);
    };
    }
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var normal=65;
    var large=120;
    var narrow=15;
    var numOfRect=5;
    var turn =0;
    var shapes = new Array(numOfRect-1) ;
    var shapesData = new Array(numOfRect-1) ;
    var shapeSize =new Array(numOfRect-1) ;
    var j=0,sum=35;

    for (i=0;i<numOfRect;i++)
    {
    j=i % 3;
    //ctx.rect(20,20,150+i,30);
    //var a= new Rectangle(20,35,narrow);

    if (j==0)
    {
    shapes[i]= new Rectangle(20,5+sum,narrow);
    // ctx.strokeStyle = '#000000';
    // ctx.strokeStyle = '#ff0000';
    shapes[i].Draw(ctx);
    shapesData[i]=5+sum;
    shapesSize=narrow;
    sum=sum+narrow;
    }
    if (j==1)
    {
    shapes[i]= new Rectangle(20,5+sum,normal);

    shapesData[i]=5+sum;
    shapesSize=normal;

    ////// context.fillStyle = 'rgba(0,0,0,0)';
    //draw shape to cover up stuff underneath
    //context.fill();
    // ctx.fillStyle="#000000";
    shapes[i].Draw(ctx);
    sum=sum+normal;
    }
    if (j==2)
    {

    shapesData[i]=5+sum;
    shapesSize=large;
    shapes[i]= new Rectangle(20,5+sum,large);
    //context.fillStyle = 'rgba(15,15,0,0)';
    shapes[i].Draw(ctx);
    sum=sum+large;
    }
    } // end of for


    //shapes[turn].Draw(ctx);
    //ctx.rect(20,20,150,normal);
    //var a= new Rectangle(20,35,narrow);
    //a.Draw(ctx);
    //var b= new Rectangle(20,85,large);
    //b.Draw(ctx);

    ctx.rect(200,200,150,normal);
    //ctx.globalCompositeOperation = "destination-out";

    ctx.clearRect ( 200 , 200 , 150 , normal );
    //ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.rect(300,200,150,normal);
    //document.body.innerHTML = "";
    ctx.rect(300,200,150,normal);
    //ctx.clearRect ( 200,200,150,15);
    //ctx.clearRect(200,200, 150, 15);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.stroke();
    </script>
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.rect(300,200,150,normal);
    <form>
    <input type="button" name="enlarge" value="Enlarge" onclick="inform()">
    <input type="button" name="reduce" value="Reduce" onclick="inform()">
    </form>

    </body>
    </html>

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,346
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    Join Date
    Aug 2014
    Posts
    2

    that comman doesnt work properly i simplify my code

    var c=document.getElementById("myCanvas");

    var ctx=c.getContext("2d");

    ctx.rect(200,200,150,50);

    ctx.clearRect(0, 0, canvas.width, canvas.height); // here we erase the screen
    ctx.rect(300,300,150,50); // this is never shown
    ctx.stroke();

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles