2

I am new one to canvas concept,I am trying to draw canvas using D3.js. I want to make canvas as responsive based on window screen size.

  function onResize(){
           var element = document.getElementsByTagName("canvas")[0];
           var context = element .node().getContext("2d");
           var scrnWid = window.innerWidth,
               scrnHgt = window.innerHeight,
               elementHgt = element.height,
               elementWid = element.width;

           var aspWid = elementWid/scrnWid;
           var aspHig = elementHgt/scrnHgt;
           context.scale(aspWid,aspHig);    
         } 

   window.addEventListener("resize",onResize);

This is the code I used to resize canvas, but it not working.I don't want to use any library except D3.js. Can anyone suggest me better solution ?

Shijo C J
  • 81
  • 1
  • 11
  • Your question is too vague to be answered. `This is the code I used to resize canvas, but it not working`; in what way does it not work? – Mark Jun 30 '17 at 17:17

1 Answers1

2

2DContext.scale() changes rendered content not display size / resolution

You are not changing the canvas size, all you are doing is scaling the content of the canvas.

You can set the page size of the canvas via its style properties

canvas.style.width = ?; // a valid CSS unit 
canvas.style.height = ?; // a valid CSS unit

This does not affect the resolution (number of pixels) of the canvas. The canvas resolution is set via its width and height properties and is always in pixels. These are abstract pixels that are not directly related to actual device display pixels nor do they directly relate to CSS pixels (px). The width and height are numbers without a CSS unit postfix

 canvas.width = ?; // number of pixel columns 
 canvas.height = ?; // number of pixel rows

Setting the 2D context scale has no effect on the display size or the display resolution, context.scale(?,?) only affects the rendered content

To scale a canvas to fit a page

const layout = {  // defines canvas layout in terms of fractions of window inner size
    width : 0.5,
    height : 0.5,
}

function resize(){
    // set the canvas resolution to CSS pixels (innerWidth and Height are in CSS pixels)
    canvas.width = (innerWidth * layout.width) | 0;  // floor with |0
    canvas.height = (innerHeight * layout.height) | 0;

    // match the display size to the resolution set above
    canvas.style.width = canvas.width + "px"; 
    canvas.style.height = canvas.height + "px"; 
}
Community
  • 1
  • 1
Blindman67
  • 51,134
  • 11
  • 73
  • 136
  • 1
    I want to resize canvas based on svg. Svg is resized based on viewbox aspect ratio.Can I get translate x,y position of svg on window resize event.Because x,y position value is still remain same as earlier in svg on resize event. – Shijo C J Jul 03 '17 at 12:08
  • @ShijoCJ You have full access to the DOM from any javascript running on the page including all events and access to SVG elements and content is part of the DOM – Blindman67 Jul 03 '17 at 13:13
  • We can make svg as responsive based on screen size using viewbox and aspect ratio.While making responsive only width and height are updating, not x,y position values.But in browser view, users will feel some updation in x,y position but not exactly in dom.And my question is that can i get the updated values of x,y position in browser. – Shijo C J Jul 03 '17 at 15:05