Meow Woof!
Javascript Code
// Draw a Dog Head with Cat Body
ctx.fillStyle = "#FFFFFF"; // fill canvas with white
ctx.fillRect(0, 0, 512, 512); // fill canvas with white
// Draw Cat Body
ctx.fillStyle = "#CD853F"; // set sandy brown color
ctx.beginPath(); // start drawing
ctx.arc(256, 256, 100, 0, Math.PI * 2); // draw 100px radius circle for body
ctx.fill(); // fill the body
// Draw Dog Head
ctx.fillStyle = "#FFAEB9"; // set light pink color
ctx.beginPath(); // start drawing
ctx.arc(256, 256, 70, 0, Math.PI * 2); // draw 70px radius circle for head
ctx.fill(); // fill the head
// Draw Cat Ears
ctx.fillStyle = "#CD853F"; // set sandy brown color
ctx.beginPath(); // start drawing
ctx.arc(200, 220, 15, 0, Math.PI * 2); // draw 15px radius circle for left ear
ctx.arc(312, 220, 15, 0, Math.PI * 2); // draw 15px radius circle for right ear
ctx.fill(); // fill the ears
// Draw Dog Eyes
ctx.fillStyle = "#000000"; // set black color
ctx.beginPath(); // start drawing
ctx.arc(238, 240, 5, 0, Math.PI * 2); // draw 5px radius circle for left eye
ctx.arc(274, 240, 5, 0, Math.PI * 2); // draw 5px radius circle for right eye
ctx.fill(); // fill the eyes
// Draw Cat Nose
ctx.fillStyle = "#000000"; // set black color
ctx.beginPath(); // start drawing
ctx.arc(256, 255, 3, 0, Math.PI * 2); // draw 3px radius circle for nose
ctx.fill(); // fill the nose
// Draw Dog Mouth
ctx.fillStyle = "#FFFFFF"; // set white color
ctx.beginPath(); // start drawing
ctx.arc(256, 265, 10, 0, Math.PI * 2); // draw 10px radius circle for mouth
ctx.fill(); // fill the mouth
// Draw Cat Whiskers
ctx.strokeStyle = "#000000"; // set black color
ctx.beginPath(); // start drawing
ctx.moveTo(245, 255); // move pen to left side of nose
ctx.lineTo(236, 265); // draw line to left side of mouth
ctx.moveTo(265, 255); // move pen to right side of nose
ctx.lineTo(274, 265); // draw line to right side of mouth
ctx.stroke(); // draw the whiskers
// Meow Woof!
accurate bicycle
balloon party
beautiful beach
cute puppy dog
happy cat
house
new business logo