Getting mouse location in canvas
Is there a way to get the location mouse inside a <canvas> tag? I want the location relative to to the upper right corner of the <canvas>, not the entire page. ...
canvas
A framework for creating educational animations
Many times I found out that I need a software to create simple educational animations. In those animations I want to draw a sequence of simple animations one by one. For example, I would like to show how a backtracking algorithm for the n-queens problem works. In that case I want to draw a chessboard, draw a queen on the top-left square...
Creating heatmaps using <canvas> element?
Are there any JavaScript libraries out there that allow you to create heatmaps using in-browser graphic rendering features such as <canvas> or SVG? I know about HeatMapAPI.com, but their heat maps are generated on the server side. I think that in the era of <canvas> element we don't need that anymore! If there is nothing like this yet,...
How can you find the height of text on an HTML canvas?
The spec has a context.measureText(text) function that will tell you how much width it would require to print that text, but I can't find a way to find out how tall it is. I know it's based on the font, but I don't know to convert a font string to a text height. ...
Using JavaScript to model 3D polyhedra
Is there a JavaScript library that models 3D polyhedra using the canvas tag or SVG? Say I wanted to produce renderings of the Platonic solids, how would I best achieve this? FWIW, I'm only concerned with WebKit-based web browsers such as Safari and Chrome. I've seen this cool demo of how to render 3D triangles, but how might I extend it...
Loading images synchronously with javascript
Hello, I need to load an image synchronously, that is I need to pause execution of javascript until the image is loaded. Since image.onload is asynchronous, the main function will return before the image is loaded. I am using canvas, and if the main function returns before the image is loaded, and therefore drawn, other things in the ...
Centering a canvas
How do I markup a page with an HTML5 canvas such that the canvas 1.) Takes up 80% of the width 2.) Has a corresponding pixel height and width which effectively define the ratio (and are proportionally maintained when the canvas is stretched to 80%) 3.) Is centered both vertically and horizontally You can assume that the canvas is the...
Can you declare <canvas> methods within a template in javascript?
Not entirely sure I posed the question in the best way but here goes... I have been playing around with the HTML5 canvas API and have got as far as drawing a shape in the canvas and getting it to move around with the arrow keys. I then tried to move my various variables and functions to a template so I could spawn multiple shapes (that...
How to force a resize from a child to a parent
I have a page-like flex application. In my main application is a holder (a canvas) that displays all the pages. The problem is that the components that are loaded inside the holder are bigger than the holder is when the main application starts. The holder height is set to 100% but still he gets scrollbars when I load a bigger component i...
Removing Geometry from Canvas
I want to remove geometry from canvas in Silverlight... I am able to remove it but removal is not immediately reflected. I mean when I perform GeometryGroup.Children.Remove(geometry) it is removing from tree but not from Canvas... Surprisingly removed geometry is still visible in the Canvas until I perform some mouse action. Can anyone ...
Blend 3 - Canvas Resize
Hi ppl.. I'm using Blend 3 for a SILVERLIGHT APP. How can I use a Canvas to resize automatically and adapted to the browser (100% width and height).. I think it could be done using C# because I want to have the objects inside to move freely around the browser, but don't know howto... Help would be appreciated! snippet XAML: <Grid x:Na...
Maximum width/height canvas scrollbar interference?
I'm trying to get a 100% width, height canvas element to draw on, but I'm hitting something of a catch 22 because both Chrome and Firefox create scrollbars. The scrollbars appear to be there because the other respective scrollbar makes the content wider/taller. That is, the vertical scrollbar is there because the bottom of the canvas is ...
Mozilla canvas adding floating text
Hi, In my canvas element,i want to add a draggable text over an image.User should able to move it within the canvas area.I could add text by using some API functions, but i have no idea of movable text.Do i need to use DIV tag to contain text ?,But the problem is, finally i need to save the canvas as an image file, so ordinary DIV tag o...
SVG Parser in Javascript
I believe that at one point, I saw a TinySVG implementation that worked in the browser, using the canvas element as the backend. I found a few sites that appeared to indicate it was at http://fuchsia-design.com/CanvaSVG/, however, that site appears to no longer exist. Is this project (or a similar one) still on the web anywhere? ...
Flex : Disabled canvas look and feel
Is there a way in Flex by which a disabled canvas looks exactly the same as an enabled canvas? I haven't been able to make sense of disabledOverLayAlpha and disabledColor properties for a Canvas component. ...
resize loaded SWF to fit in canvas
Hello, a .fla is 500 x 300. Inside, content moves OUT of the 500 x 300 stage so that it appears like it hides or moves off of the screen. .fla complied... loaded into Flex via SWFLoader: <mx:Conainer width="500" height="300"> <mx:SWFLoader width="100%" height="100%" /> </mx:Conainer> Loaded .swf file shows outside of the 500 x...
Scrolling HTML 5 Canvas in IE
I have got a canvas tag in a page wrapped within a div. In order to show the canvas in IE, I'm using the excanvas script from Google. I'd like to be able to scroll the contents of the canvas, since it's supposed to be wider and taller than the viewport (the div). I have defined the following styles: The div overflow is scroll or aut...
Java SWT - Repainting a canvas after a resize
I have a shell that contains a canvas, which in turn draws some text in its PaintListener. The problem is, when I dynamically reduce size of the shell with its setBounds method (this is going to happen every once in a while), the text doesn't get redrawn. In fact, the canvas' PaintListener doesn't get called again. Is there a way to for...
Detect mouseover of certain points within an HTML canvas?
I've built an analytical data visualization engine for Canvas and have been requested to add tooltip-like hover over data elements to display detailed metrics for the data point under the cursor. For simple bar & Gaant charts, tree graphs and node maps with simple square areas or specific points of interest, I was able to implement this...
Flex scrolling the canvas to its top
Is there a way to programmatically scroll the canvas to its topmost position? ...