An Attribute Demo

The HTML file:

<html>
<head>
</head>
<body>
<h1> An Attribute Demo</h1>
<canvas id="myCanvas" width="500", height="500" style="border:1px solid #007777;"></canvas>
<script>
   'use strict'

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

   ctx.fillStyle = "red";
   ctx.strokeStyle = "#0F0";

   // colors are persistant until changed.
   ctx.fillRect(10,10,20,20);
   ctx.strokeRect(15,15, 20,20);
   ctx.strokeText("Graphics is fun!", 350, 50);
   ctx.fillText("Javascript is fun!", 350, 65);

   // different ways to specify rgb colors.
   ctx.fillStyle = 'RGB(100%,70%,50%)';
   ctx.fillRect(50,50,20,20);
   ctx.fillStyle = 'RGB(148,129,256)';
   ctx.fillRect(70,70,20,20);

   // even some fancy math plus string concatenation
   let red = 25;
   let green = 150;
   let blue = 150;

   ctx.fillStyle = "RGB(" + red +","+ green+","+ blue + ")";
   ctx.fillRect(90,90,20,20);

   ctx.fillStyle = "hsl(3rad, 90%, 50%)";
   ctx.fillRect(120,120,20,20);

   for(let angle = 0; angle < 360; angle+= 30) {
       ctx.fillStyle="hsl("+angle + ", 90%, 50%)";
       ctx.fillRect(angle, 150,20, 20);
   }

   let x = 0;
   for(let pct =0; pct <= 100; pct+= 10) {
       ctx.fillStyle="hsl(120deg, " + pct + "%, 50%)";
       ctx.fillRect(x, 180,20, 20);
       x += 30;
   }

   x = 0;
   for(let pct =0; pct <= 100; pct+= 10) {
       ctx.fillStyle="hsl(200, 100%," +pct +"%)";
       ctx.fillRect(x, 210,20, 20);
       x += 30;
   }

   // crazy dashed lines.
   ctx.lineWidth = 4;
   ctx.setLineDash( [2,2,5,5]);

   ctx.strokeRect(250,250, 100,100);

   // a text demo
   // reset the line dash
   ctx.setLineDash( [0]);

   // orange 40 pixel sans-serif text
   ctx.strokeStyle = "orange";
   ctx.font="40px sans-serif";

   // measure how long, in pixels the string will be.
   var text = ctx.measureText("Graphics");

   // draw it.
   ctx.strokeText("Graphics", 10, 300);

   // change to a serif text in green
   ctx.font="40px serif";
   ctx.strokeStyle = "green";

   // make sure to add the offset of the first word
   ctx.strokeText(" is fun!", 10+text.width, 300);

</script>
</body>
</html>