Canvas basic

by black strings

CSS

body {
        margin: 0px;
        padding: 0px;
      }

JavaScript

$(() => {
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
var width = document.body.clientWidth;
var height = document.body.clientHeight;
canvas.width = width;
canvas.height = height;
var centerX = width / 2;
var centerY = height / 2;
var radius = 70;

ctx.fillStyle = 'grey';
ctx.fillRect(0,0, width, height);


ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'grey';
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = '#ff0000';
ctx.stroke();
console.log('width: ' + width + ', height: ' + height);
});