Javascript Canvas: Drawing Canvas

less than 1 minute read

The code has been modified slightly and now uploaded to the site.

Source is unknown.

<— Return Home

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Drawing Canvas</title>
  <script src = "script.js" defer></script>
</head>
<body>
    <h1>Canvas</h1>
    <canvas id = "myCanvas" width = "500" height = "500" style = "border-style: solid"></canvas>
</body>
</html>

<— Return Home

script.js

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");

let x = canvas.width / 2;
let y = canvas.height / 2;

ctx.beginPath();
ctx.translate(x, y);
ctx.moveTo(-5, 5);
ctx.lineTo(0, -5);
ctx.lineTo(5, 5);
ctx.lineTo(-5, 5);
ctx.fill();

ctx.strokeRect(-5, -5, 10, 10);

ctx.beginPath();
ctx.arc(0, 0, 5, 0, 2 * Math.PI);
ctx.stroke();

<— Return Home

Result

Open Link in New Tab

<— Return Home