draw rect w shadow

by andersand

HTML

<canvas id="canvas" width="400" height="400" style="background:#000;"></canvas>

CSS

body {
  background-color: #242623;
  margin: 0;
  padding: 0;
}
canvas {
  background-color: #333;
  cursor: crosshair;
}
div {
  position: absolute;
  top: 0; left: 0;
  color: #fff;
}

JavaScript

var ctx = document.getElementById("canvas").getContext("2d"),
  x = 300,
  y = 0

const w = 30
const h = 10

ctx.clearRect(0, 0, 400, 400)
let hl = "#f99"
ctx.shadowColor = hl
ctx.shadowOffsetX = 1
ctx.shadowOffsetY = 1
ctx.fillStyle = "#f00"

ctx.rect(40, 40, w, h)
ctx.fill()
ctx.strokeStyle = "#f55"
ctx.moveTo(43, 43)
ctx.lineTo(43, 48)
ctx.stroke()