0

problem with html5 canvas can Not render rectangle when I have responsive width and height of canvas exlample is show in the code. if I delete responsive part of the code it renders rectangle but with it rectangle is not rendered and can not understand why

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')


canvas.width = innerWidth
canvas.height = innerHeight - 100


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


// without this part of code it renders rectangle but with it rectangle is not rendered
window.addEventListener('resize', resizeWindow)

function resizeWindow() {
    canvas.width = innerWidth
    canvas.height = innerHeight - 100
}
resizeWindow()
medzvre gena
  • 115
  • 1
  • 1
  • 9
  • 1
    [Preventing Canvas Clear when Resizing Window](https://stackoverflow.com/q/5517783) – 001 Oct 29 '20 at 12:10
  • 1
    Does this answer your question? [Preventing Canvas Clear when Resizing Window](https://stackoverflow.com/questions/5517783/preventing-canvas-clear-when-resizing-window) – Darth Oct 29 '20 at 12:50
  • Yeah I get the idea why it was not working. – medzvre gena Oct 29 '20 at 14:20
  • 1
    Setting canvas.width or height (even the same values) will reset the canvas 2D context state to its defaults. This includes the rendered content which is cleared and pixels are all set to transparent (or black if `alpha: false` when you create the 2D context) – Blindman67 Oct 29 '20 at 14:26

0 Answers0