ASCII Coding for Turtle Character
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//background//
context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = '#66CCCC';
context.fill();
//head//
context.beginPath();
context.moveTo(425, 220);
context.bezierCurveTo(475, 200, 430, 120, 380, 160);
context.bezierCurveTo(370, 168, 350, 205, 385, 220);
context.closePath();
context.fillStyle = '#669900';
context.fill();
//left eye//
context.beginPath();
context.arc(390, 175, 6, 0, 2*Math.PI, false);
context.fillStyle = '#000000';
context.fill();
context.stroke();
//right eye//
context.beginPath();
context.arc(422, 175, 6, 0, 2*Math.PI, false);
context.fillStyle = '#000000';
context.fill();
context.stroke();
//tail//
context.beginPath();
context.moveTo(385,395);
context.quadraticCurveTo(400, 400, 390, 430);
context.quadraticCurveTo(415, 415, 415, 380);
context.closePath();
context.fillStyle = '#669900';
context.fill();
//legs//
//front left leg//
context.beginPath();
context.moveTo(290, 190);
context.quadraticCurveTo(350, 225, 350, 250);
context.quadraticCurveTo(295, 250, 290, 190);
context.fillStyle = '#669900';
context.fill();
//front right leg//
context.beginPath();
context.moveTo(510, 190);
context.quadraticCurveTo(500, 250, 450, 250);
context.quadraticCurveTo(425, 250, 510, 190);
context.fillStyle = '#669900';
context.fill();
//bottom left leg//
context.beginPath();
context.moveTo(375,350);
context.quadraticCurveTo(380, 400, 330, 415);
context.quadraticCurveTo(380, 300, 375, 390);
context.fillStyle = '#669900';
context.fill();
//bottom right leg//
context.beginPath();
context.moveTo(425,350);
context.quadraticCurveTo(430, 400, 470, 415);
context.quadraticCurveTo(480, 400, 425, 350);
context.fillStyle = '#669900';
context.fill();
//shell//
context.beginPath();
context.moveTo(400, 210);
context.bezierCurveTo(295, 225, 295, 375, 400, 400);
context.bezierCurveTo(505, 375, 505, 225, 400, 210);
context.closePath();
context.fillStyle = '#006600';
context.fill();
//heart//
context.beginPath();
context.moveTo(400, 285);
context.bezierCurveTo(350, 240, 350, 275, 400, 350);
context.bezierCurveTo(475, 250, 425, 250, 400, 285);
context.fillStyle = '#FF99CC';
context.fill();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>