Canvas-Drawing | A small canvas drawing engine | Canvas library

Yes, the

Imagine your canvas as an image ...they actually act the same. Imagine image 300px x 150px displayed to fit 100% of the container (screen)

• when container is bigger -> image will definetly blur when scaling up
• when container is smaller than image -> image will nicely scale down
• best result - image of the exact size of the container (1:1 pixel ratio)

Your canvas actually has no size given so the browser by default creates a canvas sized 300 x 150px - that is why your canvas is getting blured - because it is being scaled up; To change that size you can write at the beginning of your code smth like .:

To find out is a pixel is transparent get the pixel using ctx.getImageData and look at the alpha value.

Finally and if it helps someone, the code was fine, it didn't "work" in my project because I wasn't taking the X and Y coordinates properly, so I had to manage to get it, using this code:

Canvas is quick, but still cpu intensive. Also speed changes with the platform a bit.

Your function does all the drawing operation each change. Those operations have strokes, fills, center aligned text and something more ( i did not look all in details ).

There are some ways in which you can optimize the drawing operations.

maybe the most effective. Keep track of where a widget is, keep track of what data changed from message to message and draw only the differences. Use clearRect on the area occupied by the widget and redraw it. Do not touch the other pixels. Unless an octopus is using the hardware, you will have 2 or 3 widget changing per frame at maximum.

Instead of stroking on a per widget basis, you can trace all the paths you need at once, using a moveTo to the new position when changing widget, and using a single stroke operation at the end of the loop.

If you have some rotatory controls for example, you can draw them once on a small separate canvas, and use that canvas as a source image to be drawn at a different angle if you need to represent a rotated control. DrawImage is often optimized with hardware operations while the single fill and stroke may not.

There are probably other ways, and you can look at high level libraries that can do this for you, exposing a widget logic instead of the low level drawing operations.

I used ImageShader and used shader property of Paint Function device transform is used to get the device pixel so that it can render the effect This is my paint method look like...

Retina and very high resolution displays have pixel sizes that are smaller than the average human eye can resolve. Rendering a single line then ends up looking a like a lighter line. To fix the issues involved pages that detect the high res display will change the default CSS pixel size to 2.

The DOM knows this and adjusts its rendering to compensate. But the Canvas is not aware and its rendering is just scaled up. The default display rendering type for the canvas is bilinear interpolation. This smooths the transition from one pixel to the next which is great for photos, but not so great for lines, text, SVG and the like.

• First is to turn of bilinear filtering on the canvas. This can be done with the CSS rule image-rendering: pixelated; Though this will not create the quality of the SVG rendered on the DOM it will reduce the appearance of blurriness some users experience.

• When rendering SVG to the canvas you should turn off image smoothing as that can reduce the quality of the svg image. SVG is rendered internally and does not need additional smoothing when the internal copy is rendered onto the canvas.

  To do this ctx.imageSmoothingEnabled = false;

• Detect the CSS pixel size. The window variable devicePixelRatio returns the size of the CSS pixel compared to the actual screen physical pixel size. Retina and High res devices will typically have a value of 2. You can then use that to set the canvas resolution to match the physical pixel resolution.

  But there is a problem because devicePixelRatio is not supported on all browsers and devicePixelRatio is affected by the page zoom setting.

  So at the most basic using devicePixelRatio and the assumption that few people zoom past 200%.

Code Assuming that the canvas.style.width and canvas.style.height are already correctly set.