| 1 | function roundedRect(ctx,x,y,width,height,radius){
|
|---|
| 2 | ctx.beginPath();
|
|---|
| 3 | ctx.moveTo(x,y+radius);
|
|---|
| 4 | ctx.lineTo(x,y+height-radius);
|
|---|
| 5 | ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
|
|---|
| 6 | ctx.lineTo(x+width-radius,y+height);
|
|---|
| 7 | ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
|
|---|
| 8 | ctx.lineTo(x+width,y+radius);
|
|---|
| 9 | ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
|
|---|
| 10 | ctx.lineTo(x+radius,y);
|
|---|
| 11 | ctx.quadraticCurveTo(x,y,x,y+radius);
|
|---|
| 12 | ctx.stroke();
|
|---|
| 13 | }
|
|---|
| 14 |
|
|---|
| 15 | var canvas = document.getElementById('tutorial');
|
|---|
| 16 |
|
|---|
| 17 | // Make sure we don't execute when canvas isn't supported
|
|---|
| 18 | if (canvas.getContext){
|
|---|
| 19 |
|
|---|
| 20 | // use getContext to use the canvas for drawing
|
|---|
| 21 | var ctx = canvas.getContext('2d');
|
|---|
| 22 |
|
|---|
| 23 | // Draw shapes
|
|---|
| 24 | roundedRect(ctx,12,12,150,150,15);
|
|---|
| 25 | roundedRect(ctx,19,19,150,150,9);
|
|---|
| 26 | roundedRect(ctx,53,53,49,33,10);
|
|---|
|
|---|
