The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Clear An HTML Canvas With JavaScript

TODO: Pull subtitle into page object html_start_default_section html_end_default_section script_start_default_section script_end_default_section

Notes

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Clear An HTML Canvas With JavaScript

I'm using `.clearRect()`js` to clear the contents of
an HTML canvas element like this example which
draws a square and then immediately clears it. 

-- html/
-- show: below

<canvas id="example" width="100" height="80"></canvas>

-- /html

-- script/
-- show

document.addEventListener("DOMContentLoaded", () => {

  const c = document.getElementById("example")
  const ctx = c.getContext("2d")

  ctx.beginPath()
  ctx.rect(10, 10, 30, 30)
  ctx.fillStyle = "crimson"
  ctx.fill()
  ctx.strokeStyle = "white"
  ctx.stroke()
  ctx.closePath()

  ctx.clearRect(0, 0, c.width, c.height)


})

-- /script

-- notes
-- title: Notes

- The values of `.clearRect()`` are:

start x, start y, end x, end y

- Using the `.width`` and `.height`` of
the canvas automatically takes you do the end. 

- Which, when combined with setting the start x
and start y to zero, clears the entire thing



-- ref
-- url: https://stackoverflow.com/a/2142549/102401



-- categories
-- JavaScript 
-- HTML
-- WebDev


-- metadata
-- date: 2023-08-17 16:27:20
-- id: 2u7wgt56
-- site: aws
-- type: post
-- status: published