RPeraltaJr
8/18/2018 - 5:41 PM

Draw shapes

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    
    <canvas></canvas>

    <script type="text/javascript" src="js/canvas.js"></script>
</body>
</html>
canvas.js
content_copyfile_download
var canvas = document.querySelector('canvas'); // select 'canvas' element within document object

canvas.width = window.innerWidth; 
canvas.height = window.innerHeight;

var c = canvas.getContext('2d'); // 'c' now has access to various objects within 2d space
 

c.fillRect(x, y, width, height);
c.fillStyle = "rgba(255, 0, 0, 0.5)"; // change fill color (red)
c.fillRect(100, 100, 100, 100); // red

c.fillStyle = "rgba(0, 0, 255, 0.5)"; // change fill color (blue)
c.fillRect(400, 100, 100, 100);

c.fillStyle = "rgba(0, 255, 0, 0.5)"; // change fill color (green)
c.fillRect(300, 300, 100, 100);


// Line
c.beginPath();
c.moveTo(50, 300);
c.lineTo(300, 100);
c.lineTo(400, 300);
c.strokeStyle = "#fa34ae"; // change line color
c.stroke(); // stroke method will show the line


// Arc / Circle
c.beginPath(); // separates the circle from any previous path/lines
c.arc(300, 300, 30, 0, Math.PI * 2, false);
c.strokeStyle = "blue";
c.stroke();