Some stroke
My game is on this page
var myCanvas = document.getElementById("gameCanvas");
var ctx = myCanvas.getContext("2d");
var eyex=22;
function draw() {
ctx.clearRect(0, 0, 600, 400);
// Draw a face...
// To set the current fill style:
ctx.fillStyle = "yellow"
// To fill a rectangle. Uses the current fillStyle.
// Parameters are (x, y, width, height)
ctx.fillRect(0, 0, 100, 250);
ctx.fillStyle = "brown"
ctx.fillRect(0, 0, 100, 50);
// To stroke a circle, first build a path using arc.
// Parameters are (centerX, centerY, radius, startAngle, endAngle, anticlockwise)
// and then stroke the path.
ctx.beginPath()
ctx.arc(25, 110, 10, 0, 2*Math.PI, false)
ctx.closePath()
ctx.lineWidth = 1
ctx.strokeStyle = "black"
ctx.stroke()
ctx.fillStyle = "white"
ctx.fill();
ctx.beginPath()
ctx.arc(75, 110, 10, 0, 2*Math.PI, false)
ctx.closePath()
ctx.stroke()
ctx.fill();
ctx.beginPath()
ctx.arc(eyex, 110, 3, 0, 2*Math.PI, false)
ctx.closePath()
ctx.fillStyle = "black"
ctx.fill();
ctx.beginPath()
ctx.arc(eyex+50, 110, 3, 0, 2*Math.PI, false)
ctx.closePath()
ctx.fill();
// To make a path of straight lines, use moveto and lineto. Parameters are x and y.
ctx.beginPath()
ctx.moveTo(45, 130)
ctx.lineTo(30, 180)
ctx.lineTo(60, 178)
ctx.lineWidth = 2
ctx.strokeStyle = "orange"
ctx.stroke()
}
setInterval(draw, 10)