Practice Set, Week 4, Drawing Lines on the Canvas

by Ramya Ranganathan

HTML

<b>Practice Set 14.1: Draw an X</b>
<p>In this practice problem, you will use CanvasRenderingContext2D methods to draw lines between opposite corners to make an X. See the Javascript comments for guidance.</p>

<div>Canvas
    <br/>
    <canvas id="c1" width="300" height="200"></canvas>
</div>

CSS

canvas {
    border:1px solid blue;
}
#output {
    border: 1px solid gray;
}
div {
   float:left;
}
p {
clear: both;
}

JavaScript

// get the canvas and context objects
var canvas = document.getElementById("c1");
var ctx = canvas.getContext('2d');
 var xInc = 10, yInc = 10;


// We can draw on this 'ctx' object.  Let's set some styles 
//ctx.strokeStyle = "red";
//ctx.lineWidth = "2";
/*ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(500,330);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(50,400);
ctx.lineTo(0,50);
ctx.stroke();*/function init() {
    can = document.getElementsByTagName("canvas")[0];
    ctx = can.getContext("2d");
}
function drawLines() {
    ctx.strokeStyle = "red";
    ctx.lineWidth = "2";
    ctx.beginPath();
    ctx.moveTo(0, can.height / 2);
    ctx.lineTo(can.width, can.height / 2);
    ctx.moveTo(can.width / 2, 0);
    ctx.lineTo(can.width / 2, can.height);
    ctx.stroke();
}


// Remember from the example in 
//  video 14.3 how to draw lines, or check the MDN docs:
//  https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineTo
//  In steps: 
//    call beginPath() to start the drawing path
//    call moveTo() to position the pen at the starting point at one corner
//    call lineTo() to define a line to the opposite corner
//    call stroke() to draw it

//  Do this twice so that two corner-to-corner lines cross in the middle - it'll 
//   look like a big red 'x'