Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Björn Norén
Björn Norén
9,569 Points

Canvas Animation Project

Hello dear Treehouse Community! Thanks for being awesome!

I'm working with animtations in canvas, and have accidentally created a "Saurons Eyeball". I intented to create a long rotating object, like a clock, but I don't know how to erase the before-existing object. I tried to create a second "white" object spinning a little laiter but it only got weird.

So, anyone who knows how to fix this, and can show me or tell me how? Thanks! (And how do I do to not making the code look like a mess when I do my questions?)

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    body {
        margin: 40px; background:#666;
    }
    #my_canvas {
        background:#fff; border:#000 1px solid;
    }
</style>
<script>
    function draw(){
        var canvas = document.getElementById("my_canvas");
        var ctx    = canvas.getContext("2d");
        ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);
        var degree = (Math.PI / 180) * 1;

        function spinnBall(){
            ctx.rotate(degree); 
            ctx.beginPath();
            ctx.strokeStyle="black"; 
            ctx.moveTo(0,0);
            ctx.lineTo(200,0);
            ctx.stroke();

            ctx.rotate(degree - degree);

            ctx.beginPath();
            ctx.strokeStyle="white"; 
            ctx.moveTo(0,0);
            ctx.lineTo(200,0);
            ctx.stroke();
        }
        var iv = setInterval(spinnBall, 10);
    }
    window.onload = draw;
</script>
</head>
<body>
<canvas id="my_canvas" width="500" height="500">
</canvas>
</body>
</html>

1 Answer

Steven Parker
Steven Parker
220,378 Points

I'm a beginner with canvas myself, but I figured I'd give it a try.

We can start by agreeing that "degree - degree" will always be 0, right? So the 2nd rotate does nothing and can be removed.

I then tried moving the erase (white) section before the rotate and draw (black), but I still saw the same Moire pattern. I'm guessing this is just some kind of aliasing error due to the calculations.

So I had the idea to erase a wider line (and a pixel longer) than was drawn. So I tried this:

  function spinnBall() {
    ctx.beginPath();
    ctx.strokeStyle = "white";
    ctx.moveTo(0, 0);
    ctx.lineTo(201, 0);
    ctx.lineWidth = 3;
    ctx.stroke();

    ctx.rotate(degree);
    ctx.beginPath();
    ctx.strokeStyle = "black";
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 0);
    ctx.lineWidth = 1;
    ctx.stroke();
  }

And .. that seems to work!

Oh, to keep your code clean, you blockquote it as I did above. Follow the instructions in the Markdown Cheatsheet link below the answer section, and remember to skip a blank line before your quoted code.

Björn Norén
Björn Norén
9,569 Points

Dude! Well done figuring that out, that would have taken me forever!

Thanks for helping me out again, I appreciate it alot!

Steven Parker
Steven Parker
220,378 Points

I revised my answer using a wider line instead of a rectangle. See above.