Disable Fabric JS brush - javascript

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.

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?

Html 5 Canvas keeping track of position when rotating rendered image

I have been trying to get this working but nothing yet! My math level isn't that good as well. What I have right now is that I have an arrow which is pointing North and when the mouse is being held, the arrow points to where the mouse moves. I have a bounding box that determines when the arrow is being selected with the mouse.
After a rotation however, I lose that bounding box as it is still on the original position. Is there anyway to make the bounding box move to the new coordinates or is there any way where when I click on the rotated arrow, I make the arrow know that it is being clicked on?
Thanks in advance!

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.

how to zoom in and out a part of the screen on mouse move on jQuery?

I have some images. I want to zoom in whenever mouse goes and zoom out when mouse leaves.
I have two 'Div's on top of each other, each contains a canvas and some draggable/droppable images. I want to zoom in whenever mouse goes and zoom out when mouse leaves. I would really appreciate any help. Warm regards . like the images are showing bigger in yahoo search
Have you considered a third party jquery plugin like this: http://www.elevateweb.co.uk/image-zoom/examples

HTML5 canvas draw custom cursor

I have a canvas where you can draw and I would like the user to see the size of the point he is drawing. So I need to draw a custom cursor as 10x10 pixel square on the canvas.
Of course I would not like to paint over the image while the user is just moving the mouse.
My ideas how I could do this:
I could somehow backup the original image and paint it all over every time
I could move a with the cursor. But I would need to forward every click and make it invisible if the cursor left the canvas.
I could create a layered canvas with a second canvas on top of mine just for drawing the cursor.
What would be the best to do this?
Update
Sorry, I did not explain myself very well. The cursor will need to change color and snap to a grid, so I really need to paint it myself. I know about css cursor:url(...) that does not work for me.
Checkmark+1 to PitaJ and David Starkey--they are correct.
The simplest/most efficient solution is to modify the cursor itself. As mentioned, you can even do custom images for the cursor to do your color changes.
But if you absolutely need snap-to-grid then you have to go with something like the layered cursor canvas. There's no way to force a user's cursor into grid alignment. (Think of the pranks that would result!)
Both number 1 and 3 would work. I would go with number 3 myself. "Best" however is up to you.
CSS3:
#canvas1 {
cursor: url(./myCursor.cur), none;
}

Categories