Changing size of the canvas makes it blurry - javascript

I am changing the graph size upon the click for a better and overall view of m data for the pdf. But the problem is when i click to resize the canvas element it makes it blury and fuzzy. I am doing $('canvas').css("width","811");upon the click it however changed the size but makes the graph in the canvas blurry. I have read many posts but did not find a particular solution. Any help ?
Here is my jsfiddle

Canvas to PDF with selected DPI using chart.js and html2pdf.js
To change the output resolution for the canvas in the PDF you need to set the DIP
From memory a A4 is ~11+ inch across in landscape and you want to fit 2000 pixels, So let have a margin total of 1+inch making the width of the graph 10". We can use the CSS unit size of points (72 points per inch) so the canvas size should be 72pt * 10" = 720pt across. Scale the height by the same amount.
Now to get the DPI divide the canvas.width by the size 2000 / 10 = 200.
But I am assuming you want higher than that. So let's do it more accurately.
const A4 = { // looked this up with google
width : 11.69,
height : 8.27,
}
// using pts and inches (I dont like using CSS inches)
const points = 72; // points per inch
const graphWidth = 10; // in inches on the page.
const graphDPI = 300; // desired DPI
const aspect = 492/2000; // aspect of image
function generate_pdf(){
var canvas = document.getElementById('blanks_graph');
canvas.width = graphWidth * graphDPI;
canvas.height = Math.floor(canvas.width * aspect);
canvas.style.width = (graphWidth * points) + "pt";
canvas.style.height = Math.floor(graphWidth * points * aspect)+"pt";
// add left margin to center graph.
// you should remove the button and maybe put a margin on the top of
// the canvas
canvas.style.marginLeft = Math.floor(((A4.width - graphWidth) / 2) * points) + "pt"
// changing the size needs to redraw the canvas
redrawGraph();
// the graph is drawn via a timeout event so will not be ready untill
// after this function is done. Also there is the animation to avoid
// So easy way is to just create the PDF with a timeout
setTimeout(function(){
var element = document.getElementById('main_data_div');
html2pdf(element, {
margin: 0,
filename: 'myfile.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { dpi: graphDPI, letterRendering: true },
jsPDF: { unit: 'in', format: 'a4', orientation: 'l' }
});
},
3000 // 3 seconds to redraw and animate.
);
}
function redrawGraph(){ // redraws the graph
// just wrap this function around the graph draw code

Related

HTML Canvas coordinate systems and rendering process

I'm playing with drawing on html canvas and I'm little confused of how different coordinate systems actually works. What I have learned so far is that there are more coordinate systems:
canvas coordinate system
css coordinate system
physical (display) coordinate system
So when I draw a line using CanvasRenderingContext2D
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(3, 1);
ctx.lineTo(3, 5);
ctx.stroke();
before drawing pixels to the display, the path needs to be
scaled according to the ctx transformation matrix (if any)
scaled according to the ratio between css canvas element dimensions (canvas.style.width and canvas.style.height) and canvas drawing dimensions (canvas.width and canvas.height)
scaled according to the window.devicePixelRatio (hi-res displays)
Now when I want to draw a crisp line, I found that there are two things to fight with. The first one is that canvas uses antialiasing. So when I draw a line of thikness 1 at integer coordinates, it will be blurred.
To fix this, it needs to be shifted by 0.5 pixels
ctx.moveTo(3.5, 1);
ctx.lineTo(3.5, 5);
The second thing to consider is window.devicePixelRatio. It is used to map logical css pixels to physical pixels. The snadard way how to adapt canvas to hi-res devices is to scale to the ratio
const ratio = window.devicePixelRatio || 1;
const clientBoundingRectangle = canvas.getBoundingClientRect();
canvas.width = clientBoundingRectangle.width * ratio;
canvas.height = clientBoundingRectangle.height * ratio;
const ctx = canvas.getContext('2d');
ctx.scale(ratio, ratio);
My question is, how is the solution of the antialiasing problem related to the scaling for the hi-res displays?
Let's say my display is hi-res and window.devicePixelRatio is 2.0. When I apply context scaling to adapt canvas to the hi-res display and want to draw the line with thickness of 1, can I just ignore the context scale and draw
ctx.moveTo(3.5, 1);
ctx.lineTo(3.5, 5);
which is in this case effectively
ctx.moveTo(7, 2);
ctx.lineTo(7, 10);
or do I have to consider the scaling ratio and use something like
ctx.moveTo(3.75, 1);
ctx.lineTo(3.75, 5);
to get the crisp line?
Antialiasing can occur both in the rendering on the canvas bitmap buffer, at the time you draw to it, and at the time it's displayed on the monitor, by CSS.
The 0.5px offset for straight lines works only for line widths that are odd integers. As you hinted to, it's so that the stroke, that can only be aligned to the center of the path, and thus will spread inside and outside of the actual path by half the line width, falls on full pixel coordinates. For a comprehensive explanation, see this previous answer of mine.
Scaling the canvas buffer to the monitor's pixel ratio works because on high-res devices, multiple physical dots will be used to cover a single px area. This allows to have more details e.g in texts, or other vector graphics. However, for bitmaps this means the browser has to "pretend" it was bigger in the first place. For instance a 100x100 image, rendered on a 2x monitor will have to be rendered as if it was a 200x200 image to have the same size as on a 1x monitor. During that scaling, the browser may yet again use antialiasing, or another scaling algorithm to "create" the missing pixels.
By directly scaling up the canvas by the pixel ratio, and scaling it down through CSS, we end up with an original bitmap that's the size it will be rendered, and there is no need for CSS to scale anything anymore.
But now, your canvas context is scaled by this pixel ratio too, and if we go back to our straight lines, still assuming a 2x monitor, the 0.5px offset now actually becomes a 1px offset, which is useless. A lineWidth of 1 will actually generate a 2px stroke, which doesn't need any offset.
So no, don't ignore the scaling when offsetting your context for straight lines.
But the best is probably to not use that offset trick at all, and instead use rect() calls and fill() if you want your lines to fit perfectly on pixels.
const canvas = document.querySelector("canvas");
// devicePixelRatio may not be accurate, see below
setCanvasSize(canvas);
function draw() {
const dPR = devicePixelRatio;
const ctx = canvas.getContext("2d");
// scale() with weird zoom levels may produce antialiasing
// So one might prefer to do the scaling of all coords manually:
const lineWidth = Math.round(1 * dPR);
const cellSize = Math.round(10 * dPR);
for (let x = cellSize; x < canvas.width; x += cellSize) {
ctx.rect(x, 0, lineWidth, canvas.height);
}
for (let y = cellSize; y < canvas.height; y += cellSize) {
ctx.rect(0, y, canvas.width, lineWidth);
}
ctx.fill();
}
function setCanvasSize(canvas) {
// We resize the canvas bitmap based on the size of the viewport
// while respecting the actual dPR
// Thanks to gman for the reminder of how to suppport all early impl.
// https://stackoverflow.com/a/65435847/3702797
const observer = new ResizeObserver(([entry]) => {
let width;
let height;
const dPR = devicePixelRatio;
if (entry.devicePixelContentBoxSize) {
width = entry.devicePixelContentBoxSize[0].inlineSize;
height = entry.devicePixelContentBoxSize[0].blockSize;
} else if (entry.contentBoxSize) {
if ( entry.contentBoxSize[0]) {
width = entry.contentBoxSize[0].inlineSize * dPR;
height = entry.contentBoxSize[0].blockSize * dPR;
} else {
width = entry.contentBoxSize.inlineSize * dPR;
height = entry.contentBoxSize.blockSize * dPR;
}
} else {
width = entry.contentRect.width * dPR;
height = entry.contentRect.height * dPR;
}
canvas.width = width;
canvas.height = height;
canvas.style.width = (width / dPR) + 'px';
canvas.style.height = (height / dPR) + 'px';
// we need to redraw
draw();
});
// observe the scrollbox size changes
try {
observer.observe(canvas, { box: 'device-pixel-content-box' });
}
catch(err) {
observer.observe(canvas, { box: 'content-box' });
}
}
canvas { width: 300px; height: 150px; }
<canvas></canvas>
Preventing anti-aliasing requires that the pixels of the canvas, which is a raster image, are aligned with the pixels of the screen, which can be done by multiplying the canvas size by the devicePixelRatio, while using the CSS size to hold the canvas to its original size:
canvas.width = pixelSize * window.devicePixelRatio;
canvas.height = pixelSize * window.devicePixelRatio;
canvas.style.width = pixelSize + 'px';
canvas.style.height = pixelSize + 'px';
You can then use scale on the context, so that the drawn images won't be shrunk by higher devicePixelRatios. Here I am rounding so that lines can be crisp on ratios that are not whole numbers:
let roundedScale = Math.round(window.devicePixelRatio);
context.scale(roundedScale, roundedScale);
The example then draws a vertical line from the center top of one pixel to the center top of another:
context.moveTo(100.5, 10);
context.lineTo(100.5, 190);
One thing to keep in mind is zooming. If you zoom in on the example, it will become anti-aliased as the browser scales up the raster image. If you then click run on the example again, it will become crisp again (on most browsers). This is because most browsers update the devicePixelRatio to include any zooming. If you are rendering in an animation loop while they are zooming, the rounding could cause some flickering.

Scaling mouse drawings elements on a html canvas

Is there any way to scale drawing elements on a canvas? I'm creating an application where then user can place points on a canvas, but when I try to resize the browser window all the elements disappear.
My initial tentative was to calculate the screen difference before and after the resizing. After I get the percentages, I just sat the scale on the canvas and place the coordinates that was saved from the first time I drew on the canvas, but still doesn't work, if the points appear on the canvas, it is on the same place without scaling. Can someone give me little line of thought?
private calculateCanvasScreenDifference(previousSize, guestScreen) {
return ((controlScreen - currentSize) * 100) / controlScreen;
}
let difWidthPercent = Math.abs(this.calculateCanvasScreenDifference(canvasPreviousWidth, canvasWidth) * 0.01);
let difHeightPercent = Math.abs(this.calculateCanvasScreenDifference(canvasPreviousHeight, canvasHeight) * 0.01);
let scaleX = ((Math.abs(difWidthPercent) <= 1) ? 1.00 - difWidthPercent : difWidthPercent - 1.00);
let scaleY = ((Math.abs(difHeightPercent) <= 1) ? 1.00 - difHeightPercent : difHeightPercent - 1.00);
this.cx.scale(Number(scaleX), Number(scaleY));
...
...
// then start recreating the drawing that was previous saved on an array of object(x, y values)
this.cx.beginPath();
this.cx.arc(coord.x, coord.y, 7, 0, Math.PI * 2, true);
this.cx.stroke();
Keep track of your canvas width and start with a scale factor of 1.
let originalWidth = canvas.width;
let scale = 1;
On resize calculate the new scale factor. And update tracked canvas size.
let scale = newWidth / originalWidth;
originalWidth = newWidth;
Use the scale factor for all drawing at all times. e.g.
context.arc(coord.x * scale, coord.y * scale, radius, 0, Math.PI*2, false);
Note: This approach assumes the original and new canvas sizes are proportional. If not then you will need to track width and height, and calculate separate x and y scale factors.

responsive canvas on window resize event

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 ?
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";
}

How to draw an image in real size and ensure printing will be correct

I don't really know how to formulate my problem into one question but here is a good description:
Imagine I want to draw a square on an HTML canvas, with dimension 1" x 1".
I know that using pixels as a printable length is meaningless, we need to take in account the DPI. In the following example I took a dpi of 300:
<canvas id="myCanvas" width="400" height="400"></canvas>
This is my Javascript:
var dpi = 300;
var cContext = document.getElementById("myCanvas").getContext("2d");
cContext.moveTo(50, 50);
// Draw a square
cContext.lineTo(350, 50);
cContext.lineTo(350, 350);
cContext.lineTo(50, 350);
cContext.lineTo(50, 50)
cContext.stroke();
The result is a nice square with width 300px in a 300dpi setting, so it should print a one inch square when printing on paper. But the problem is that it doesn't. I checked the printer settings and used 300dpi.
Can someone tell me what I'm doing wrong, or point me in the right direction?
Print quality/DPI
The printer's DPI setting is not related to the source image DPI and is commonly known as print quality.
You need the print size
The image DPI is dependent on its resolution (width and height in pixels) and the size it is printed at mm or inches to give printing resolution (iDPU "image Dots Per Unit" for further reference in this answer).
The image DPI is meaningless unless you also associate a fixed print size to the image.
If the printer has a DPI set differently to the iDPI of the image the printer (or driver) will either downsample or upsample the image DPI to match the required DPI. You want to avoid downsampling as that will reduce the image quality.
Page Size
To get the printer DPI to match the image iDPU . This example is for an A4 page in portrait mode. You can use any size print page but you will need to know the actual physical size.
const pageSizes = {
a4 : {
portrait : {
inch : {
width : 8.27,
height : 11.69,
},
mm : {
width : 210,
height : 297,
}
},
landscape : {
inch : {
height : 8.27,
width : 11.69,
},
mm : {
width : 297,
height : 210,
}
},
}
Canvas resolution
Create a canvas with a iDPI 300 to be 2 inches by 2 inches.
const DPI = 300; // need to have a selected dots per unit in this case inches
const units = "inch";
const pageLayout = "portrait";
const printOn = "a4";
// incase you are using mm you need to convert
const sizeWidth = 2; // canvas intended print size in units = "inch"
const sizeHeight = 2;
var canvas = document.createElement("canvas");
canvas.width = DPI * sizeWidth;
canvas.height = DPI * sizeHeight;
Canvas size
Scale the canvas to fit the page at the correct size to match the print size. This will be the canvas print size/page print width
canvas.style.width = ((sizeWidth / pageSizes[printOn][pageLayout][units].width) * 100) + "%";
For the height you need to assume that the pixel aspect is square and the height of the page may be longer or shorter than the print page so you must use pixels.
canvas.style.height = Math.round((sizeHeight / pageSizes[printOn][pageLayout][units].width) * innerWidth) + "px";
Add the canvas to the page
document.body.appendChild(canvas);
Note: the canvas must be added to the page body or an element that is 100% of the page width. IE the width in pixels === innerWidth.
Note: the canvas should not have a border, padding, margin or inherit any CSS styles that affect its size.
Printing
Ensure the printer quality is set to 300DPI (or higher).
Select the page size (in this case A4 is 210 × 297 millimeters or 8.27 × 11.69 inches)
Select the layout to be portrait.
Select no borders on the print options.
Print
Printing with borders.
If you want borders on the printed page you need to use custom borders so that you know the border size. (NOTE example is only using inches)
const border = { // in inches
top : 0.4,
bottom : 0.4,
left : 0.4,
right : 0.4,
}
Create the canvas as shown above.
Size the canvas
canvas.style.width = ((sizeWidth / (pageSizes.a4.portrait.width - border.left - border.right) * 100) + "%";
The height becomes a little more complex as it needs the pixel width of the page adjusted for the borders.
canvas.style.height = Math.round((sizeHeight / (pageSizes.a4.portrait.width - border.left - border.right)) * innerWidth * (1 - (border.left - border.right) / pageSizes.a4.portrait.width) ) + "px";
I noticed in the comments you measured in cm and not inches (good choice, metric system FTW), so here's a commented example that handles those measures correctly
var dpi = 300; // the print resolution
var ppmm = dpi / 25.4; // get the pixel-per-millimeter ratio
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var x = 5 * ppmm; // 5mm
var y = 5 * ppmm; // 5mm
var w = 76 * ppmm; // 76mm
var h = 76 * ppmm // 76mm
ctx.rect(x, y, w, h); // drawing a rectangle the simple way
ctx.stroke();
var data = canvas.toDataURL(); // extract the image data
// inject the image data into a link, creating a downloadable file
var link = document.getElementById("link");
link.setAttribute('href', 'data:application/octet-stream;charset=utf-16le;' + data);
link.setAttribute('download', "image.png");
<!-- the canvas is scaled down from 300dpi to 96dpi it shouldn't affect the final image but it makes it nicer for the screen and more manageable -->
<canvas id="canvas" width="1125px" height="1125px" style="width:360px;height:360px"></canvas>
download
to print a 300dpi image of 7.5cm you have to get the pixel-per-mm ratio and multiply your sizes to that.
When you download the image, it will be a 72dpi image of 1125x1125px, resample that to 300dpi and you'll get 270x270px which equals to 95,25mm when printed (for the whole image, padding and all).
the rectangle drawn will have a 897.6377952755906px side length, with prints out to 76mm at 300dpi
btw, that fractional pixel size is the reason why i scale down the canvas on the screen. Since we're prioritising the print, the screen image will suffer and look blurry, scaling it down will make it look crispier. Plus it's a more manageable size to see in the browser.
final note: apparently a retina screen uses a different dpi value to render the canvas, so the rectangle will look smaller. on a "normal" resolution monitor it will measure 7.6cm on screen too.

Responsive canvas with fixed line width

I'm drawing a line chart with canvas. The chart is responsive, but the line has to have a fixed width.
I made it responsive with css
#myCanvas{
width: 80%;
}
,so the stroke is scaled.
The only solution I have found is to get the value of the lineWidth with the proportion between the width attribute of the canvas and its real width.
To apply it, I clear and draw the canvas on resize.
<canvas id="myCanvas" width="510" height="210"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
function draw(){
var canvasattrwidth = $('#myCanvas').attr('width');
var canvasrealwidth = $('#myCanvas').width();
// n sets the line width
var n = 4;
var widthStroke = n * (canvasattrwidth / canvasrealwidth) ;
ctx.lineWidth = widthStroke;
ctx.beginPath();
ctx.moveTo( 0 , 10 );
ctx.lineTo( 200 , 100 );
ctx.stroke();
}
$(window).on('resize', function(){
ctx.clearRect(0, 0, c.width, c.height);
draw();
});
draw();
</script>
This is my first canvas and I think there is an easier way to made the lineWidth fixed (not to clear and draw everytime on resize), but I cannot find it.
There is a question with the similar problem
html5 canvas prevent linewidth scaling
but with the method scale(), so I cannot use that solution.
There is no way to get a real world dimension of details for the canvas such as millimeters or inches so you will have to do it in pixels.
As the canvas resolution decreases the pixel width of a line needs to decrease as well. The limiting property of line width is a pixel. Rendering a line narrower than a pixel will only approximate the appearance of a narrower line by reducing the opacity (this is done automatically)
You need to define the line width in terms of the lowest resolution you will expect, within reason of course and adjust that width as the canvas resolution changes in relation to this selected ideal resolution.
If you are scaling the chart by different amounts in the x and y directions you will have to use the ctx.scale or ctx.setTransform methods. As you say you do not want to do this I will assume that your scaling is always with a square aspect.
So we can pick the lowest acceptable resolution. Say 512 pixels for either width or height of the canvas and select the lineWidth in pixels for that resolution.
Thus we can create two constants
const NATIVE_RES = 512; // the minimum resolution we reasonably expect
const LINE_WIDTH = 1; // pixel width of the line at that resolution
// Note I Capitalize constants, This is non standard in Javascript
Then to calculate the actual line width is simply the actual canvas.width divided by the NATIVE_RES then multiply that result by the LINE_WIDTH.
var actualLineWidth = LINE_WIDTH * (canvas.width / NATIVE_RES);
ctx.lineWidth = actualLineWidth;
You may want to limit that size to the smallest canvas dimension. You can do that with Math.min or you can limit it in the largest dimension with Math.max
For min dimention.
var actualLineWidth = LINE_WIDTH * (Math.min(canvas.width, canvas.height) / NATIVE_RES);
ctx.lineWidth = actualLineWidth;
For max dimension
var actualLineWidth = LINE_WIDTH * (Math.max(canvas.width, canvas.height) / NATIVE_RES);
ctx.lineWidth = actualLineWidth;
You could also consider the diagonal as the adjusting factor that would incorporate the best of both x and y dimensions.
// get the diagonal resolution
var diagonalRes = Math.sqrt(canvas.width * canvas.width + canvas.height * canvas.height)
var actualLineWidth = LINE_WIDTH * (diagonalRes / NATIVE_RES);
ctx.lineWidth = actualLineWidth;
And finally you may wish to limit the lower range of the line to stop strange artifacts when the line gets smaller than 1 pixel.
Set lower limit using the diagonal
var diagonalRes = Math.sqrt(canvas.width * canvas.width + canvas.height * canvas.height)
var actualLineWidth = Math.max(1, LINE_WIDTH * (diagonalRes / NATIVE_RES));
ctx.lineWidth = actualLineWidth;
This will create a responsive line width that will not go under 1 pixel if the canvas diagonal resolution goes under 512.
The method you use is up to you. Try them out a see what you like best. The NATIVE_RES I picked "512" is also arbitrary and can be what ever you wish. You will just have to experiment with the values and method to see which you like best.
If your scaling aspect is changing then there is a completely different technique to solve that problem which I will leave for another question.
Hope this has helped.

Categories