diff --git a/Learning HTML Canvas/canvas-resize/canvas.js b/Learning HTML Canvas/canvas-resize/canvas.js index db24110..ae0f548 100644 --- a/Learning HTML Canvas/canvas-resize/canvas.js +++ b/Learning HTML Canvas/canvas-resize/canvas.js @@ -6,4 +6,37 @@ canvas.height = window.innerHeight; var c = canvas.getContext('2d'); -console.log(canvas); \ No newline at end of file +c.fillStyle = 'rgba(240, 200, 0, 0.8)'; +c.fillRect(100,100,100,100); +c.fillRect(200,300,100,100); +c.fillRect(300,500,100,100); +console.log(canvas); + + +// Line +c.beginPath(); +c.moveTo(50,300); +c.lineTo(300,100); +c.lineTo(400,300); +c.strokeStyle = '#ffff'; +c.stroke(); + +// Arc/ Circle +c.beginPath(); +c.arc(300, 300, 30, 0 , Math.PI *2, false); +c.strokeStyle = 'blue'; +c.stroke(); + + +var i =0; + + while(i< 5){ + var x = Math.random() * window.innerWidth; + var y = Math.random() * window.innerHeight; + c.beginPath(); + c.arc(x, y, 30, 0 , Math.PI *2, false); + c.strokeStyle = 'blue'; + c.stroke(); + + i++; + } \ No newline at end of file diff --git a/Learning HTML Canvas/canvas-resize/index.html b/Learning HTML Canvas/canvas-resize/index.html index bd3a7f4..090f38e 100644 --- a/Learning HTML Canvas/canvas-resize/index.html +++ b/Learning HTML Canvas/canvas-resize/index.html @@ -8,6 +8,7 @@ } body { margin: 0; + background-color: red; }