Skip to content

Instantly share code, notes, and snippets.

@cflove

cflove/class_Canvas.html

Created March 15, 2014 01:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cflove/9560709 to your computer and use it in GitHub Desktop.
Save cflove/9560709 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
class_Canvas.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>
<canvas id="MyDrawing" width="600" height="400" style="border: 1px solid black;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('MyDrawing');
var ctx = canvas.getContext('2d');
// ctx.fillStyle = "rgb(200,0,0)";
// ctx.fillRect (10, 10, 55, 50);
// =====================================================================
// ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
// ctx.fillRect (30, 30, 55, 50);
// =====================================================================
// ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
// ctx.fillRect(25,25,100,100);
// ctx.clearRect(45,45,60,60);
// ctx.strokeStyle = "rgb(200,0,0)";
// ctx.strokeRect(50,50,50,50);
// =====================================================================
// ctx.beginPath();
// ctx.moveTo(75,50);
// ctx.lineTo(100,75);
// ctx.lineTo(100,25);
// ctx.strokeStyle = "rgb(200,0,0)"
// ctx.stroke()
// ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
// ctx.fill();
// // =====================================================================
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise)
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment