lock drawing pad (mouse pen pad) to <div> - javascript

I have a mousepen pad. I wrote a drawing app with Javascript for it and I can use it with full functionality. When I connect the pad to pc, it acts like a mouse. It fits the whole screen, but my drawing canvas is not that big.
I want the pad to fit (map) into the canvas. So, when I point in the top-right corner of the pad with the pen pointer, it currently points in the top-right corner of the PC's screen, but I want it to only point in teh top-right corner of my div.
How do I do this?

Related

Diagonal scrolling when both X and Y scrollbars are available

I use a magic trackpad (a touchpad) and one thing I have noticed is that applications such as Adobe Photoshop will let me scroll diagonally (both X and Y axis at the same time).
I never thought about using that same functionality in my browser, as I didn't have any use case for it. Until now. I'm working on a project which has a "canvas" (a drawing area) that is bigger than the visible area of the browser.
I have scrolling bars (overflow: auto;), but moving around the canvas just doesn't feel as "good" (in terms of UX) as with Photoshop. That's because I can't scroll both axes at the same time.
Eg, if I'm at the top left corner of the canvas and I want to go to the bottom right corner, in Photoshop I just touch-drag diagonally two fingers on my touchpad, but in Chrome/Safari/Firefox I first have to scroll down and then scroll right.
Visual example: https://codepen.io/alexandernst/pen/XWpPJNj (the left area shows the entire canvas, the right one is what the user sees. Try to scroll in the right area until you see the red square.)
Is there any way I can implement diagonal scrolling?

Keeping rectangle in place after rotating

I'm building a grphical editor that allows moving objects, resizing etc.
In the picture you can see the upper rectangle. When I move the anchors it resizes just fine. However, when it has a rotation like in the lower image (ie. transform: rotate(20deg)) and I move the anchors, the rectangele starts floating in different directions depending on the rotation. I'm guessing it's because the the x and y axis get rotated as well. I'm looking to do some sort of calculation to keep the rectangle in place just as if it weren't rotated. transform-origin doesn't cut it as it has other transforms applied to it.
Could anyone help me find what x and y offset I have to apply to the position when it gets resized. Thank you very much!

Always Show Mouse Over Canvas

I'm working on a javascript/canvas game, and using mouse position to determine what blocks to dig. Whenever I use the movement controls the mouse disappears though, which is annoying because then I have stop moving and move the mouse to see its position again.
So I'm looking for a way to make the mouse always visible on the canvas, opposite to using CSS cursor: none to make it invisible.
Full project here: https://gist.github.com/TuckerFlynn/0a52278878a888b0f695
The mouse can certainly navigate off-canvas, so...
Hide the mouse when it's over the canvas.
Draw your own "fake cursor" following the current mouse position reported by canvas's mousemove.
If the mouse leaves the canvas, just leave the fake cursor visible as a reminder of the mouse's last canvas position.
Your "fake" canvas cursor doesn't have to look like a mouse. It could even be a simple cross. Or if you really want it to look like a mouse, then move an image of a mouse around the canvas.

Disable Fabric JS brush

I have a simple stamp tool, which places a translucent geometrical shape like star, hexagon on mouse down, moves it on mouse move from its center and places it fully opaque on mouse up. But, it is giving me a trail of pencil brush on mouse move, no matter what. I do not need this pencil stroke. How can this be disabled ?
I have tried to set the width of freeDrawingBrush to 0 and now the stroke does not stay on the canvas, but it still shows during mouse move when the stamp shape is moving and then goes away on mouse up. Is there a way to disable this ?
I have also tried to disable freeDrawingMode but then disabling canvas wide selection of objects does not work, and hence I need a way to somehow stop the pencil brush when the stamp tool is selected.

get mouse coordinates within image in canvas

I've got a HTML Canvas with an image in it and I would like to get mouse coordinates where user clicked within the image.
I can do this in a way, that I get mouse coordinates starting from top-left corner of the canvas, but I need to use top-left corner of the image itself as [0,0] point.
I am working with this example http://phrogz.net/tmp/canvas_zoom_to_cursor.html
thanks
The context.translate(x,y) command does exactly what you're asking for.
context.translate will move the origin of the canvas to the x,y coordinates given to it. So if x,y is the top left corner of the "hit" image, then you can make x,y the origin (effectively 0,0) using context.translate(x,y)
You don't present code, but I assume that you have already:
determined where the user clicked the mouse,
determined if the user clicked the image by hit-testing the mouse coordinate against the bounds of the image,
have available the x,y where you originally drew that image on the canvas
To illustrate, if you context.translate(imageLeftX,imageTopY) and a then fillRect(0,0,1,1) will draw a rectangle in the top left corner of the image.

Categories