<!DOCTYPE html>
<html>
<head></head>
<body>
<canvas width="600" height="600" id="C"></canvas>
<script type="text/javascript">
var canvas = document.getElementById( "C" );
var context = canvas.getContext( "2d" );
var image_data = context.getImageData( 0, 0, 600, 600 );
function put_pixel( img_data, x, y ) {
var index = ( x + y * img_data.width ) * 4;
img_data.data[index++] = 0;
img_data.data[index++] = 0;
img_data.data[index++] = 0;
img_data.data[index++] = 255;
}
function draw_line( x1, y1, x2, y2 ) {
var dx = x2 - x1;
var dy = y2 - y1;
var slope = dy / dx;
var x = x1, y = y1;
var error = slope - 0.5;
for ( var i = 1; i <= dx; ++i ) {
put_pixel( image_data, x, y );
if ( error >= 0 ) {
y = y + 1;
error = error - 1;
}
x = x + 1;
error = error + slope;
}
}
draw_line( 0, 0, 400, 10 );
context.putImageData( image_data, 0, 0 );
</script>
</body>
</html>
