Use these Chart.js options: // Boolean - whether or not the chart should be responsive and resize when the browser does. You may need to add extra logic if you need to. In the demo we will care only about stage WIDTH. We will fit a canvas stage into user window with scaling. Before we set up automatic resizing in our app, we’ll use the browser console to test addEventListener and the resize event. This demo will show you the simplest solution. And you may need a different behavior for different applications. I had a lot of problems with that, because after all of that my line graphic looked terrible when mouse hovering and I found a simpler way to do it, hope it will help :) So first of all, there are many way to make your canvas stage responsive. The essential fact is that we have to set the size of the canvas in the div-tag. Var cv_values = document.getElementById("cv_values").getContext("2d") Var myDoughnut = new Chart(ctx).Doughnut(doughnutData) Not the most elegant solution, but I solved this problem while maintaining the enhanced resolution for retina devices by simply setting the width and height of the canvas manually before each successive call to Chart.js var ctx = document.getElementById("canvas").getContext("2d") but if you run it again, it sees that the DOM width and height are 600 (check the other answer to this question to see why) and then sets it to 1200 and the css width and height to 600. It takes only three easy steps to create a responsive canvas: Remove the width and height attributes from your canvas>. (What's actually happening is it is checking whether it should add more pixels to the canvas by changing the DOM attribute for width and height, if it should, multiplying it by some factor, usually 2, then changing that, and then changing the css style attribute to maintain the same size on the page.)įor example, when you run it once and your canvas width and height are set to 300, it sets them to 600, then changes the style attribute to 300. The problem is it doesn't realize it has already done this, so when called successive times, it multiplies the already (doubled or whatever) size AGAIN until things start to break. Again, to do that we can look at the canvas's clientWidth and clientHeight properties. W3Schools offers free online tutorials, references and exercises in all the major languages of the web. ![]() What size should we pick The most obvious answer is 'the same size the canvas is displayed'. ![]() In three.js we can set the canvas's drawingbuffer size by calling tSize. Resizing the canvas is an interesting part of the canvas spec and its best not to set the same size if its already the size we want. if I’m displaying an object that takes up. I also posted the question on SO before realising this forum existed I’d like to find an efficient way to resize the canvas to match the size of the browser window, without resizing or scaling the contents of the canvas ie. What's happening is Chart.js multiplies the size of the canvas when it is called then attempts to scale it back down using CSS, the purpose being to provide higher resolution graphs for high-dpi devices. A canvas's internal size, its resolution, is often called its drawingbuffer size. Hi all, I tried searching for an answer to this but didn’t find anything, hope I didn’t miss anything obvious.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |