First we will define our canvas area. I gave it an ID of “cherries.” It’s also important to note the width and the height. Apply these with CSS may give you varies (or really weird looking) results. Add this to the HTML section:
var canvas = document.getElementById('cherries'); var context = canvas.getContext('2d');
Draw first Cherry:
For any object on the canvas, we need to tell it where start our drawing. Here, we’re going to find the center(ish) of the canvas for both the starting point of our cherry and its stem. We will also define the size of the cherry. Anything we draw will start with
context.beginPath() to let canvas know we will start drawing:
context.beginPath(); var centerX1 = canvas.width / 3; var centerY1 = canvas.height / 2; var radius = 30;
Since we want the stem to show ‘behind’ the cherry, we draw that first, using a bezierCurve. This will start at our center, then draw a line to the midpoints we define. Here, we have 3 points (x1, y1, x2, y2, x3, y3):
context.moveTo(centerX1, centerY1); context.bezierCurveTo(280, 30, 320, 40, 340, 50); context.lineWidth = 1; context.strokeStyle = '#006600'; context.stroke();
Now we draw the cherry by drawing a red circle with a black border. We will use canvas’
arc function to draw a full, closed circle. There’s a bit of math we need to use to make this work. There is a nice explanation of the arc function over at HTML5 Canvas Tutorials.
context.beginPath(); context.arc(centerX1, centerY1, radius, 0, 2 * Math.PI, false); context.fillStyle = 'red'; context.fill(); context.lineWidth= 1; context.strokeStyle= '#000000'; context.stroke();
Draw 2nd Cherry:
Now time for the 2nd cherry. We want that to just touch the first cherry, while making it clear there are 2 objects. We we do here is slightly change the starting X and Y points to be a bit more to the right, and lower. The radius will stay the same.
var centerX2 = canvas.width / 2.4; var centerY2 = canvas.height / 1.8; var radius = 30;
Once again, we draw the stem first, follow the same path as above so they end up at the same x3, y3.
context.beginPath(); context.moveTo(centerX2, centerY2); context.bezierCurveTo(280, 30, 320, 40, 340, 50); context.lineWidth = 1; // line color context.strokeStyle = '#006600'; context.stroke();
And the 2nd cherry:
context.beginPath(); context.arc(centerX2, centerY2, radius, 0, 2 * Math.PI, false); context.fillStyle = 'red'; context.fill(); context.lineWidth = 1; context.strokeStyle = '#000000'; context.stroke();
Now let’s give it a text label:
context.font = '40pt helvetica'; context.fillStyle = 'red'; context.fillText('Cherries!', 150, 340);
And there you have it! 2 cherries, with the stems. I’m sure I’ll get more refined at this process as I go along; I’m doing a bit of learning along with my students, but I think this demonstrates nicely some of things you can do with canvas.