Skip to content

Instantly share code, notes, and snippets.

@crongro

crongro/Programming Education using Canvas.markdown

Last active January 3, 2016 05:09
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 crongro/8413995 to your computer and use it in GitHub Desktop.
Save crongro/8413995 to your computer and use it in GitHub Desktop.
Download ZIP
Programming Education using Canvas
Raw
index.html
<body>
<section>
<canvas id="tutorial" width="500" height="500"></canvas>
</section
</body>
Raw
script.js
/* 0. what is this ? */
//canvas , rectangle
/* 1. draw basic */
drawRect(50,30,50,50); //x,y,width.height
/* 2. draw circle */
fillColor("blue");
drawRect(50,120,100,100); //x,y,width.height
/* 3. draw circle with other color */
//face
fillColor("white");
drawCircle(100,300,50);
//eye
fillColor("red");
drawCircle(80,280,10);
drawCircle(120,280,10);
//mouth
drawHalfCircle(100,310,30);
Raw
style.css
body { text-align:center;}
section { width : 100%; margin : 0px auto;}
canvas { border: 1px solid black; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment