<canvas id="canvas"></canvas>

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

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

canvasW = canvas.width;
canvasH = canvas.height;


ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowColor = 'grey';

ctx.font = '50px bold sans-serif';
ctx.textBaseline = 'alphabetic';
ctx.textAlign = 'start';
ctx.strokeStyle = 'green';
ctx.strokeText('Canvas2D色々できるね', canvasW / 3, canvasH / 5);

ctx.font = '50px bold sans-serif';
ctx.textBaseline = 'alphabetic';
ctx.textAlign = 'start';
ctx.strokeStyle = 'blue';
ctx.strokeText('Canvas2D色々できるね', canvasW / 3, canvasH / 3);

ctx.font = '50px bold sans-serif';
ctx.textBaseline = 'alphabetic';
ctx.textAlign = 'start';
ctx.fillStyle = 'red';
ctx.fillText('Canvas2D色々できるね', canvasW / 3, canvasH / 2);