canvas ドットインストール #JavaScript

index01.html

<!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>Document</title>
    <style>
body{
    background:#222;
}

canvas{
    background:#fff;
}
    </style> 
</head>
<body>
     <canvas width="600" height="240">
         canvas not supported
     </canvas> <!--width:300px height:100px -->
    <script src="main01.js"></script>
</body>
</html>

main01.js


'use strict';
{
    function draw(){
   const canvas=document.querySelector('canvas');
   if(typeof canvas.getContext==='undefined'){
       return;
   }
   const ctx= canvas.getContext('2d');

   //ctx.fillRect(x,y,width,height);
   ctx.fillStyle = 'pink'; //cssのcolorプロパティ
   ctx.fillRect(50,50,50,50);　
   ctx.strokeStyle = '#f00'; //cssのborder
   ctx.lineWidth = 8; //border太さ
   //ctx.lineJoin = 'round';
   ctx.lineJoin = 'bevel';

   ctx.strokeRect(50,50,50,50);

    }
    draw();
}