All geek questions in one place

Drawing on the canvas with a pencil

I made a script that draws a series of lines on the canvas, which makes it look like a sketch. There are two problems in the script. First, why is the y value twice as large as it should be? And two, why is the line a few pixels wide and gone?

I tried this on both Google Chrome and Firefox, and get the same wrong results. I understand that I can split the y value in two to fix the first problem, but this part of my question is why I should do this. I don’t need to.

+4
source share
2 answers

I think you have two problems:

  • You need to be more careful about how you calculate the offset, where to draw. I have the code below that demonstrates how to handle this correctly.
  • You do not set the width and height of the <canvas> element itself, which means that it will scale your lines funny, depending on what you set in your CSS.

Example

I created a simple collaborative drawing application using <canvas> and socket.io, which allows me to draw on the screen like a pencil. You can check it out here:

http://xjamundx.no.de/

The source is also on github if this can help:

In particular, I am doing something like this to figure out where to draw things:

 x = e.clientX + window.scrollX y = e.clientY + window.scrollY x -= $game.offsetLeft y -= $game.offsetTop
+2
source

Give the width and height for your canvas; always! http://jsfiddle.net/mz6hK/7/

recorded

+1
source

Source: https://habr.com/ru/post/1391032/

More articles:


All Articles