canvas basic turtorial

by louis0420

HTML

<canvas id="basic" width="400" height="400" style="background-color:rgba(19,244,29,0.5);"></canvas>

JavaScript

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


const drawFill = ({
  color,
  x,
  y,
  width,
  height
}) => {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, width, height);
}

const clearFill = ({
  x,
  y,
  width,
  height
}) => {
  ctx.clearRect(x, y, width, height);
}
const drawBorder = ({
  color,
  x,
  y,
  width,
  height
}) => {
  ctx.fillStyle = color;
  ctx.strokeRect(x, y, width, height);
}

const renderCanvas = () => {
  drawBorder({
    color: "blue",
    x: 20,
    y: 30,
    width: 100,
    height: 100,
  })
  drawFill({
    color: "black",
    x: 20,
    y: 30,
    width: 100,
    height: 100,
  })

  drawBorder({
    color: "blue",
    x: 200,
    y: 50,
    width: 100,
    height: 100,
  })
  // clear Rect
  clearFill({
    x: 20,
    y: 30,
    width: 20,
    height: 20,
  })
}

window.onload = renderCanvas