Smooth random line using Canvas

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.canvas.width  = window.innerWidth;
context.canvas.height  = window.innerHeight;
var x1 = Math.random()*context.canvas.width;
var y1 = Math.random()*context.canvas.height;
var xdir = 0; var ydir = 0;
context.beginPath();

setInterval(function(){
  开发者_StackOverflow社区  for (var i = 0; i < 10; i++) {
        randx = Math.random(); randy = Math.random();

        if (randx > 0.95) {
            if (xdir < 0) xdir = (xdir+((Math.random()*1.5) - 1))/2;
            else if (xdir > 0) xdir = (xdir+((Math.random()*1.5) - 0.5))/2;
            else xdir = (Math.random()*1.5) - 0.75;
        }

        if (randy > 0.95) {
            if (ydir < 0) ydir = (ydir+((Math.random()*1.5) - 1))/2;
            else if (ydir > 0) ydir = (ydir+((Math.random()*1.5) - 0.5))/2;
            else ydir = (Math.random()*1.5) - 0.75;
        }

        context.lineTo(x1+xdir, y1+ydir);
        context.stroke();

        x1 = x1+xdir;
        y1 = y1+ydir;
    }
},50);

This is my random line script, but my lines are really ugly: http://i.stack.imgur.com/YZT2o.png

Is there any better way for achieving a smooth line using canvas?

take a look at this question:

Drawing GOOD LOOKING (like in Flash) lines on canvas (HTML5) - possible?

Lines on HTML5 Canvas are nicely antialiased on all browsers/OS (AFAIK). However, in your update callback with its 10-strokes-per-loop you are neither clearing your canvas nor clearing your path and so you are drawing the same path on top of itself 200 times per second. This is causing all the anti-aliasing to be destroyed as even the faintest opacity pixels build up until they are solid lines.

The simplest fix to make your code look pretty is to add this line:

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

inside your for loop, for example right before context.stroke();.

This one-line change makes it look good, but is bad for performance, clearing and redrawing the canvas 10 times for each visual update.

Here's a better alternative:

context.beginPath();
context.moveTo(x1,y1);
context.lineTo(x1+xdir, y1+ydir);
context.stroke();

x1 += xdir; y1 += ydir;

This way you never clear the canvas, and instead draw only the changed line each frame.

One other alternative (if you need the full path always available) is to accumulate your changes to the context path in one high-speed setInterval loop, and in another, slower loop occasionally clear the canvas and re-stroke the entire path. This is similar to what I've done for my Langton's (Very Fast) Ant simulation.