I have a Canvas element with inside an image ( the canvas has the same dimension of the image), i want to crop this image using a selection rectangle! For my project i use the javascript's framework JQuery and i'm searching a plugin that implementing a custom selection rectangle on canvas!
Anyone know one plugin that do this (I founded a lot of plugin that implements this functionality but only on elements)?
If no, what is the way to implement a custom rectangle on Canvas elements?
I hope in yours answers!
did you tried using Fabric.js to generate rectangle on Canvas ?
Usually, everything that is drawn onto a canvas will automatically change the canvas content. If you want to draw a rectangle with the mouse without destroying the underlying canvas, the usual way is to add an additional (temporary) canvas on top of the original canvas. The new canvas has a transparent background, so the underlying canvas is fully visible.
Now you draw the rectangle on the temporary canvas (which has the same dimensions as the origianl) and store the coordinates of the selection to apply the crop process on the original.
Please see my example here: http://jsbin.com/apitak/4
Related
I have a canvas element (square, line, triangle, etc.) I want to move these drawings in canvas within the width and height of the canvas element. There is an example here but the elements here are created manually. I am using the canvas from teledraw.js. And I make drawings with my tools.
example of this question => Drag and Drop Multiple Objects in HTML5 Canvas
the library i use => https://github.com/lakenen/teledraw-canvas
When animating elements on a canvas, you will first need to clear the canvas to later rerender the next position of the elements on it. I assume the library you use has some sort of animation function.
I have a Canvas where I'm drawing some things in 2D, one of the elements is a text that has to be vertically cropped. I cannot draw the whole text and crop it after as there are already some elements drawn and they would be lost.
I've been checking the MDN Canvas docs but I haven't found a way of implementing this feature.
Would it be possible to make this in vanilla JS, if so how should I proceed?
Thanks in advance.
I have an image board utilizing the excellent FabricJS library. I am attempting to create some sort of a "keyhole" view "preview" on another canvas that is on the page, copying a small section of the fabricJS canvas, and displaying it on the second canvas using context.drawImage()
preview_canvas_context.drawImage(fabric.lowerCanvasEl, x,y, ...)
This works great! My issue is ghosting from the copied image. I'm not sure what fancy stuff FabricJS is doing in the background, but if I have some blank space behind an image or object on the fabric canvas, (or I reach the edge of the canvas) the copied image smears as illustrated in the following screen capture:
Why does this happen, and what can I do to fix it?
Setting a background image or color on the canvas prevents this issue from occurring.
var canvas = new fabric.Canvas('c', {
backgroundColor: 'rgb(255,255,255)'
});
I still get image smearing when I leave the outside perimeters, but that is expected and preventable by setting bounds that the viewport object cannot leave.
I have 2 canvas in a div. I tried to translate one of the canvas, but it didn't work.
http://jsfiddle.net/VkbV5/ shows the case where i commented off the translation line:
this.innerElement2Ctx.translate(100,100);
But when I include the line, the small square disappeared. Why? If you run this page in browser and inspect the innerElement2, you will see that it didn't move at all, but the small square disappeared.
For your information, I need 2 canvas, because I am planning to attach mouse event to innerElement2.
Translating a context adjusts where the 0,0 point is for future drawing commands; scaling a context adjusts how large items draw on the canvas; rotating a context adjusts the direction that items are drawn. None of these context transformations adjust the size or position of the canvas box itself.
Here's an example I made of adjusting canvas transformation so that drawing the same commands allows the user to zoom and pan around a canvas drawing:
http://phrogz.net/tmp/canvas_zoom_to_cursor.html
If you want to move the placement of a canvas within your HTML page, use simple CSS placement as you would with any other element, e.g. a <div>.
If you want complex 2D or 3D transformations you can use cutting edge features of CSS for this (as supported by modern browsers). For example, see:
https://developer.mozilla.org/en/CSS/transform#CSS_transform_functions
So I have a grid of images (map tiles) and I draw a semi-transparent mask over it using an absolutely positioned div with width and height set to 100%.
I now want the user to be able to draw out a rectangle on the mask, with the mouse using mouse-down, drag, mouse-up. The rectangle would be drawn dynamically as the mouse moves, and the rectangle would be like a window through the mask displaying the map tiles underneath with no semi-transparency.
I'm currently looking at using 5 divs - one for the window and 4 for the mask which would be resized using javascript as I drag the mouse. Does anyone know an easier way to do this ? I'm using jquery and I need to support IE7 upwards so html5 only technology is out.
Cheers,
Colm
I think the jQuery Crop plugin does exactly what you need (Demo here).
Maybe it's possible to carve that part out from it.
You should try out SVG canvas instead. There's a SVG js library, good for beginner:
http://raphaeljs.com/, check it out
PLEASE NOTE THAT THIS HAS NOTHING TO DO WITH HTML5 (PLEASE DONT MIX UP WITH HTML5 CANVAS, THIS IS SVG)