3

I have created a project using the JavaScript library P5.js and used its built-in line() and ellipse() functions to draw lines and circles to a canvas. I am now attempting to remove the entirety of P5.js and its functions from my project to leave pure JavaScript however when I replace P5s line and ellipse functions with JavaScripts ctx.LineTo and ctx.arc I do not get the same results.

The drawings created with the P5.js Library look much sharper and high resolution.

The image below was created using P5.js line() and ellipse() functions.

This image however, was created using pure JavaScript and as you can see it looks much worse.

Using pure JavaScript I have set the line width to be the thinnest possible however it still looks thicker and fuzzier than the P5.js version.

How can I draw lines using pure JavaScript exactly how the P5.js Library does to get the same sharp, crisp result?

The Javascript I am using currently is as follows:

ctx.beginPath();
ctx.moveTo(30, 40);
ctx.lineTo(60, 90);
ctx.strokeStyle = 'white';
ctx.lineWidth = 0.1;
ctx.stroke();

This question post was labelled as a duplicate of another question however the "duplicate" question does not solve my issue as I stated I have tried adding .5 onto to coordinate values that that doesn't work.

Terminal
  • 113
  • 4
  • 11
  • 1
    Can you share what you have written with pure javascript? – Chang Jul 15 '17 at 03:32
  • https://stackoverflow.com/questions/7530593/html5-canvas-and-line-width/7531540#7531540 – Chang Jul 15 '17 at 03:49
  • Possible duplicate of [HTML5 Canvas and Line Width](https://stackoverflow.com/questions/7530593/html5-canvas-and-line-width) – Chang Jul 15 '17 at 03:50

1 Answers1

4

devicePixelRatio

The canvas is at the wrong resolution.Suspect you are using a retina or high resolution display. You need to match the canvas pixel size to the device pixel size, currently you are matching the CSS pixel size which for retina displays is 4 device pixels for each CSS pixel. Use devicePixelRatio global property to find CSS pixel size, then set the canvas resolution canvas.width = pixelWidth * devicePixelRatio same for height.

The following two answers are related to the same issue.

Community
  • 1
  • 1
Blindman67
  • 51,134
  • 11
  • 73
  • 136
  • You are exactly right, I am using a Retina display. And your solutions and links to those two answers were very helpful and solved my issue. Thanks! – Terminal Jul 16 '17 at 15:16
  • my pixel ration is 1 so that doesnt make any difference right but i am getting some thick lines and some are perfect @Blindman67 – Aravind Reddy May 21 '18 at 15:38