Canvas width and height in HTML5

Question

Is it possible to fix the width and height of an HTML5 canvas element   The usual way is the following     lt canvas id  canvas  width  300  height  300  gt  lt  canvas gt

User · Answer

A canvas has 2 sizes  the dimension of the pixels in the canvas  it s backingstore or drawingBuffer  and the display size  The number of pixels is set using the the canvas attributes  In HTML   lt canvas width  400  height  300  gt  lt  canvas gt    Or in JavaScript  someCanvasElement width   400  someCanvasElement height   300    Separate from that are the canvas s CSS style width and height  In CSS  canvas       or some other selector       width  500px     height  400px      Or in JavaScript  canvas style width    500px   canvas style height    400px     The arguably best way to make a canvas 1x1 pixels is to ALWAYS USE CSS to choose the size then write a tiny bit of JavaScript to make the number of pixels match that size   function resizeCanvasToDisplaySize canvas          look up the size the canvas is being displayed    const width   canvas clientWidth     const height   canvas clientHeight         If it s resolution does not match change it    if  canvas width     width    canvas height     height         canvas width   width       canvas height   height       return true           return false      Why is this the best way  Because it works in most cases without having to change any code   Here s a full window canvas    x000D   x000D  const ctx   document querySelector   c   getContext  2d    x000D   x000D  function render time    x000D    time    0 001  x000D    resizeCanvasToDisplaySize ctx canvas   x000D    x000D    ctx fillStyle     DDE   x000D    ctx fillRect 0  0  ctx canvas width  ctx canvas height   x000D    ctx save    x000D    x000D    const spacing   64  x000D    const size   48  x000D    const across   ctx canvas width   spacing   1  x000D    const down   ctx canvas height   spacing   1  x000D    const s   Math sin time   x000D    const c   Math cos time   x000D    for  let y   0  y  lt  down    y    x000D      for  let x   0  x  lt  across    x    x000D        ctx setTransform c  -s  s  c  x   spacing  y   spacing   x000D        ctx strokeRect -size   2  -size   2  size  size   x000D        x000D      x000D     x000D    ctx restore    x000D     x000D    requestAnimationFrame render   x000D    x000D  requestAnimationFrame render   x000D   x000D  function resizeCanvasToDisplaySize canvas    x000D        look up the size the canvas is being displayed x000D     const width   canvas clientWidth  x000D     const height   canvas clientHeight  x000D   x000D        If it s resolution does not match change it x000D     if  canvas width     width    canvas height     height    x000D       canvas width   width  x000D       canvas height   height  x000D       return true  x000D       x000D   x000D     return false  x000D    x000D  body   margin  0    x000D  canvas   display  block  width  100vw  height  100vh    x000D   lt canvas id  c  gt  lt  canvas gt  x000D   x000D   x000D    And Here s a canvas as a float in a paragraph   x000D   x000D  const ctx   document querySelector   c   getContext  2d    x000D   x000D  function render time    x000D    time    0 001  x000D    resizeCanvasToDisplaySize ctx canvas   x000D    x000D    ctx fillStyle     DDE   x000D    ctx fillRect 0  0  ctx canvas width  ctx canvas height   x000D    ctx save    x000D    x000D    const spacing   64  x000D    const size   48  x000D    const across   ctx canvas width    spacing   1  x000D    const down     ctx canvas height   spacing   1  x000D    const s   Math sin time   x000D    const c   Math cos time   x000D    for  let y   0  y  lt   down    y    x000D      for  let x   0  x  lt   across    x    x000D        ctx setTransform c  -s  s  c  x   spacing  y   spacing   x000D        ctx strokeRect -size   2  -size   2  size  size   x000D        x000D      x000D     x000D    ctx restore    x000D     x000D    requestAnimationFrame render   x000D    x000D  requestAnimationFrame render   x000D   x000D  function resizeCanvasToDisplaySize canvas    x000D        look up the size the canvas is being displayed x000D     const width   canvas clientWidth  x000D     const height   canvas clientHeight  x000D   x000D        If it s resolution does not match change it x000D     if  canvas width     width    canvas height     height    x000D       canvas width   width  x000D       canvas height   height  x000D       return true  x000D       x000D   x000D     return false  x000D    x000D  span    x000D     width  250px   x000D     height  100px   x000D     float  left   x000D     padding  1em 1em 1em 0  x000D     display  inline-block  x000D    x000D  canvas   x000D     width  100   x000D     height  100   x000D    x000D   lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Praesent cursus venenatis metus  Mauris ac nibh at odio scelerisque scelerisque  Donec ut enim  lt span class  diagram  gt  lt canvas id  c  gt  lt  canvas gt  lt  span gt  x000D  vel urna gravida imperdiet id ac odio  Aenean congue hendrerit eros id facilisis  In vitae leo ullamcorper  aliquet leo a  vehicula magna  Proin sollicitudin vestibulum aliquet  Sed et varius justo  x000D   lt br  gt  lt br  gt  x000D  Quisque tempor metus in porttitor placerat  Nulla vehicula sem nec ipsum commodo  at tincidunt orci porttitor  Duis porttitor egestas dui eu viverra  Sed et ipsum eget odio pharetra semper  Integer tempor orci quam  eget aliquet velit consectetur sit amet  Maecenas maximus placerat arcu in varius  Morbi semper  quam a ullamcorper interdum  augue nisl sagittis urna  sed pharetra lectus ex nec elit  Nullam viverra lacinia tellus  bibendum maximus nisl dictum id  Phasellus mauris quam  rutrum ut congue non  hendrerit sollicitudin urna  x000D   lt  p gt  x000D   x000D   x000D    Here s a canvas in a sizable control panel   x000D   x000D  const ctx   document querySelector   c   getContext  2d    x000D   x000D  function render time    x000D    time    0 001  x000D    resizeCanvasToDisplaySize ctx canvas   x000D   x000D    ctx fillStyle     DDE   x000D    ctx fillRect 0  0  ctx canvas width  ctx canvas height   x000D    ctx save    x000D    x000D    const spacing   64  x000D    const size   48  x000D    const across   ctx canvas width   spacing   1  x000D    const down   ctx canvas height   spacing   1  x000D    const s   Math sin time   x000D    const c   Math cos time   x000D    for  let y   0  y  lt  down    y    x000D      for  let x   0  x  lt  across    x    x000D        ctx setTransform c  -s  s  c  x   spacing  y   spacing   x000D        ctx strokeRect -size   2  -size   2  size  size   x000D        x000D      x000D     x000D    ctx restore    x000D     x000D    requestAnimationFrame render   x000D    x000D  requestAnimationFrame render   x000D   x000D  function resizeCanvasToDisplaySize canvas    x000D        look up the size the canvas is being displayed x000D     const width   canvas clientWidth  x000D     const height   canvas clientHeight  x000D   x000D        If it s resolution does not match change it x000D     if  canvas width     width    canvas height     height    x000D       canvas width   width  x000D       canvas height   height  x000D       return true  x000D       x000D   x000D     return false  x000D    x000D   x000D     ----- the code above related to the canvas does not change ---- x000D     ---- the code below is related to the slider ---- x000D  const     document querySelector bind document   x000D  const left       left    x000D  const slider       slider    x000D  let dragging  x000D  let lastX  x000D  let startWidth  x000D   x000D  slider addEventListener  mousedown   e   gt    x000D   lastX   e pageX  x000D   dragging   true  x000D      x000D   x000D  window addEventListener  mouseup   e   gt    x000D   dragging   false  x000D      x000D   x000D  window addEventListener  mousemove   e   gt    x000D    if  dragging    x000D      const deltaX   e pageX - lastX  x000D      left style width   left clientWidth   deltaX    px   x000D      lastX   e pageX  x000D      x000D      x000D  body    x000D    margin  0  x000D    x000D   frame   x000D    display  flex  x000D    align-items  space-between  x000D    height  100vh  x000D    x000D   left   x000D    width  70   x000D    left  0  x000D    top  0  x000D    right  0  x000D    bottom  0  x000D      x000D  canvas   x000D    width  100   x000D    height  100   x000D    x000D  pre   x000D    padding  1em  x000D    x000D   slider   x000D    width  10px  x000D    background   000  x000D    x000D   right   x000D    flex 1 1 auto  x000D    x000D   lt div class  frame  gt  x000D     lt div class  left  gt  x000D        lt canvas id  c  gt  lt  canvas gt  x000D     lt  div gt  x000D     lt div class  slider  gt  x000D     x000D     lt  div gt  x000D     lt div class  right  gt  x000D        lt pre gt  x000D    controls x000D    go  x000D    here x000D   x000D   amp lt - drag this x000D        lt  pre gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    here s a canvas as a background   x000D   x000D  const ctx   document querySelector   c   getContext  2d    x000D   x000D  function render time    x000D    time    0 001  x000D    resizeCanvasToDisplaySize ctx canvas   x000D    x000D    ctx fillStyle     DDE   x000D    ctx fillRect 0  0  ctx canvas width  ctx canvas height   x000D    ctx save    x000D    x000D    const spacing   64  x000D    const size   48  x000D    const across   ctx canvas width   spacing   1  x000D    const down   ctx canvas height   spacing   1  x000D    const s   Math sin time   x000D    const c   Math cos time   x000D    for  let y   0  y  lt  down    y    x000D      for  let x   0  x  lt  across    x    x000D        ctx setTransform c  -s  s  c  x   spacing  y   spacing   x000D        ctx strokeRect -size   2  -size   2  size  size   x000D        x000D      x000D     x000D    ctx restore    x000D     x000D    requestAnimationFrame render   x000D    x000D  requestAnimationFrame render   x000D   x000D  function resizeCanvasToDisplaySize canvas    x000D        look up the size the canvas is being displayed x000D     const width   canvas clientWidth  x000D     const height   canvas clientHeight  x000D   x000D        If it s resolution does not match change it x000D     if  canvas width     width    canvas height     height    x000D       canvas width   width  x000D       canvas height   height  x000D       return true  x000D       x000D   x000D     return false  x000D    x000D  body   margin  0    x000D  canvas    x000D    display  block   x000D    width  100vw   x000D    height  100vh    x000D    position  fixed  x000D    x000D   content   x000D    position  absolute  x000D    margin  0 1em  x000D    font-size  xx-large  x000D    font-family  sans-serif  x000D    font-weight  bold  x000D    text-shadow  2px  2px 0  FFF   x000D                -2px -2px 0  FFF  x000D                -2px  2px 0  FFF  x000D                 2px -2px 0  FFF  x000D    x000D   lt canvas id  c  gt  lt  canvas gt  x000D   lt div id  content  gt  x000D   lt p gt  x000D  Lorem ipsum dolor sit amet  consectetur adipiscing elit  Praesent cursus venenatis metus  Mauris ac nibh at odio scelerisque scelerisque  Donec ut enim vel urna gravida imperdiet id ac odio  Aenean congue hendrerit eros id facilisis  In vitae leo ullamcorper  aliquet leo a  vehicula magna  Proin sollicitudin vestibulum aliquet  Sed et varius justo  x000D   lt  p gt  x000D   lt p gt  x000D  Quisque tempor metus in porttitor placerat  Nulla vehicula sem nec ipsum commodo  at tincidunt orci porttitor  Duis porttitor egestas dui eu viverra  Sed et ipsum eget odio pharetra semper  Integer tempor orci quam  eget aliquet velit consectetur sit amet  Maecenas maximus placerat arcu in varius  Morbi semper  quam a ullamcorper interdum  augue nisl sagittis urna  sed pharetra lectus ex nec elit  Nullam viverra lacinia tellus  bibendum maximus nisl dictum id  Phasellus mauris quam  rutrum ut congue non  hendrerit sollicitudin urna  x000D   lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    Because I didn t set the attributes the only thing that changed in each sample is the CSS  as far as the canvas is concerned   Notes     Don t put borders or padding on a canvas element  Computing the size to subtract from the number of dimensions of the element is troublesome

User · Answer

The canvas DOM element has  height and  width properties that correspond to the height       and width       attributes  Set them to numeric values in JavaScript code to resize your canvas  For example   var canvas   document getElementsByTagName  canvas   0   canvas width    800  canvas height   600    Note that this clears the canvas  though you should follow with ctx clearRect  0  0  ctx canvas width  ctx canvas height   to handle those browsers that don t fully clear the canvas  You ll need to redraw of any content you wanted displayed after the size change   Note further that the height and width are the logical canvas dimensions used for drawing and are different from the style height and style width CSS attributes  If you don t set the CSS attributes  the intrinsic size of the canvas will be used as its display size  if you do set the CSS attributes  and they differ from the canvas dimensions  your content will be scaled in the browser  For example      Make a canvas that has a blurry pixelated zoom-in    with each canvas pixel drawn showing as roughly 2x2 on screen canvas width    400  canvas height   300   canvas style width     800px   canvas style height    600px     See this live example of a canvas that is zoomed in by 4x    x000D   x000D  var c   document getElementsByTagName  canvas   0   x000D  var ctx   c getContext  2d    x000D  ctx lineWidth     1  x000D  ctx strokeStyle     f00   x000D  ctx fillStyle       eff   x000D   x000D  ctx fillRect   10 5  10 5  20  20    x000D  ctx strokeRect  10 5  10 5  20  20    x000D  ctx fillRect    40  10 5  20  20    x000D  ctx strokeRect  40  10 5  20  20    x000D  ctx fillRect    70  10  20  20    x000D  ctx strokeRect  70  10  20  20    x000D   x000D  ctx strokeStyle     fff   x000D  ctx strokeRect  10 5  10 5  20  20    x000D  ctx strokeRect  40  10 5  20  20    x000D  ctx strokeRect  70  10  20  20    x000D  body   background  eee  margin 1em  text-align center   x000D  canvas   background  fff  border 1px solid  ccc  width 400px  height 160px   x000D   lt canvas width  100  height  40  gt  lt  canvas gt  x000D   lt p gt Showing that re-drawing the same antialiased lines does not obliterate old antialiased lines  lt  p gt  x000D   x000D   x000D

User · Answer

Thank you very much  Finally I solved the blurred pixels problem with this code    lt canvas id  graph  width 326 height 240 style  width 326px height 240px  gt  lt  canvas gt   With the addition of the  half-pixel  does the trick to unblur lines

[html] Canvas width and height in HTML5

The answer is

Here's a full window canvas:

And Here's a canvas as a float in a paragraph

Here's a canvas in a sizable control panel

here's a canvas as a background

Examples related to html

Examples related to canvas

Tags