How to fill the whole canvas with specific color

Question

How to fill the whole HTML5  lt canvas gt  with one color  I saw some solutions such as this to change the background color using CSS but this is not a good solution since the canvas remains transparent  the only thing that changes is the color of the space it occupies  Another one is by creating something with the color inside the canvas  for example  a rectangle see here  but it still does not fill the whole canvas with the color  in case the canvas is bigger than the shape we created   Is there a solution to fill the whole canvas with a specific color

User · Answer

You know what  there is an entire library for canvas graphics  It is called p5 js You can add it with just a single line in your head element and an additional sketch js file  Do this to your html and body tags first   lt html style  quot margin 0   padding 0 quot  gt   lt body style  quot margin 0   padding 0 quot  gt   Add this to your head   lt script type  quot text javascript quot  src  quot https   cdnjs cloudflare com ajax libs p5 js 0 6 1 p5 js quot  gt  lt  script gt   lt script type  quot text javascript quot  src  quot sketch js quot  gt  lt  script gt   The sketch js file function setup         createCanvas windowWidth  windowHeight       background r  g  b

User · Answer

You can change the background of the canvas by doing this   lt head gt       lt style gt          canvas               background-color  blue                 lt  style gt   lt  head gt

User · Answer

x000D   x000D  let canvas   document getElementById  canvas    x000D  canvas setAttribute  width   window innerWidth   x000D  canvas setAttribute  height   window innerHeight   x000D  let ctx   canvas getContext  2d    x000D   x000D    Draw Canvas Fill mode x000D  ctx fillStyle    blue   x000D  ctx fillRect 0 0 canvas width  canvas height   x000D      margin  0  padding  0  box-sizing  border-box    x000D  body   overflow  hidden    x000D   lt canvas id  canvas  gt  lt  canvas gt  x000D   x000D   x000D

User · Answer

We don t need to access the canvas context  Implementing hednek in pure JS you would get canvas setAttribute  style    background-color  00F8     But my preferred method requires converting the kabab-case to camelCase   canvas style backgroundColor     00F8

User · Answer

Yes  fill in a Rectangle with a solid color across the canvas  use the height and width of the canvas itself   x000D   x000D  var canvas   document getElementById  canvas    var ctx   canvas getContext  2d    ctx fillStyle    blue   ctx fillRect 0  0  canvas width  canvas height   x000D  canvas  border  1px solid black    x000D   lt canvas width 300 height 150 id  canvas  gt  x000D   x000D   x000D

User · Answer

If you want to do the background explicitly  you must be certain that you draw behind the current elements on the canvas   var canvas   document getElementById  canvas    var ctx   canvas getContext  2d       Add behind elements  ctx globalCompositeOperation    destination-over     Now draw  ctx fillStyle    blue   ctx fillRect 0  0  canvas width  canvas height

[javascript] How to fill the whole canvas with specific color?

Examples related to javascript

Examples related to html

Examples related to canvas