How do I force a redraw of canvas api ?
I have a js button which I want to force a redraw when clicking.
It only redraws after I hover on the canvas.
Have access to canvas and ctx in js.
I can't say for certain without seeing your code but I think you could simply take the function being called in the canvas onhover and use that same function for your button using the onclick attribute.
Related
Hello I'm trying to drag an object between two ui-router ui-view elements
one ui-view element is the main 'canvas' and the other element is a right hand pane that had some or tags.
I got the objects draggable using angular-drag drop. However, when I try to drag things to the left onto the canvas? It ends up going behind the main canvas instead of on top of them.
I tried adjusting the z-index even trying it with !important but it di did not help to show the dragged object when I drag it into the canvas.
The following image shows what I mean when I drag the image halfway into the canvas. It gets hidden behind the canvas div.
Any advice on how I can correct this?
I discovered that my bug could be solved as follows.
I added the jquery ui options:
{
helper: 'clone', // creates a new object.
appendTo: 'body' // assigns new object to be a child of a selector
}
You can't just use appendTo as the JQ UI docs will tell you. You need the helper.
I am using Flot to plot images for our project. For pre-defined shapes like line, pie, I can add tooltip through flot.tooltip.
However, we have some images that are drawn through Html5 canvas API, such as Here. I would like to add a tooltip for the red rectangle and another tooltip for the blank area. Any library to make it work?
With canvas there isn't a good way to detect when the mouse hovers over a particular drawn item; it's just a buffer, with no idea of what operations were used to draw into it. Flot's own hover detection has no concept of what was drawn on the canvas; it just knows that, e.g. the pie starts at a particular point and extend outwards a certain number of pixels.
So no matter what, you will have to write a function that accepts a mouse event, examines whatever data you used to draw the image, and decides what that corresponds to.
Where Flot could help is in providing a way to override the built-in hover function with your own; then the tooltip plugin would simply work with your function. Since you can't currently do that, you have a choice of a) modifying the tooltip plugin to use your function, or b) registering your own mousemove listener on the overlay element, which then generates 'fake' plothover events for the tooltip plugin to consume.
I have embedded a Video in HTML5 page over a Canvas.
I want to draw a rectangle with mouse events on the Video and rectangle should not be erased.
Please help me how to do this ..
Thanks..
You can create a new Canvas Element just on top of your Video-Canvas. and Handle your mouse events for that new canvas element. and Make sure that you do not set the background property for your new canvas, this will make it transparent and the Video-Canvas elements content will be visible. Let me know if you do not get it.
I am having 4 images inside Canvas in HTML5. When I drop the image somewhere in the Canvas, I want to display the name of the image inside my Canvas .
Is it possible? If yes, please tell me how can it be done?
The source code can be found here. KineticJS is used to handle the canvas.
I've never used KineticJS before, but from what I read in the doc :
To detect drag and drop events with KineticJS, we can use the on() method to detect dragstart , dragmove, or dragend events. The on() method requires an event type and a function to be executed when the event occurs.
It'll end up beign something like this
rajiniGroup.on('dragend', function(evt) {
// add your text somewhere using a shape text
};
Shape text are detailed in the doc as well.
I'm trying to get the data from a canvas and set the src attribute of a img element. The problem here is that, the canvas has a background image setted with css, not with canvas methods. Is there any way or method to extract the background image so the toDataURL method could catch it?
Thanks
I guess there is a solid reason why you are not drawing the background image to the canvas itself so I can offer you this solution:
Draw the background-image to a second canvas element positioned below the first canvas.
When you want to take the canvas data and use it create a third canvas (no need to attach it to the DOM or make it visible.
Draw the background canvas onto it and then draw the main canvas on top.
Take the data from the third canvas.
Voila.