How to Learn Canvas / ActionScript?
I want to learn to program the canvas element. Anyone got any recommendations of websites / books? ...
canvas
How can I create a color striped background, animated to slowly turn 360 degrees, using no raster images or js?
I got the idea to create a purely code-driven striped image background when I saw Katy Perry's website: http://www.katyperry.com/ Then I saw the animation of the rotating earth on FoWD's 404 page: http://futureofwebdesign.com/404 I believe this same concept should be possible using html5, css3 and canvas. Here's what I'm thinking: Have...
how can i "reset" the canvas (and the bitmap used to draw into) so i can draw a new bitmap into the canvas ?
My loadMap() method generate a canvas.throwIfRecycled exception when i try to load a new map. When i start the game, the initial map loads and work fine though, its only when i try to load a new map that i get the exception .. how can i "reset" canvas and the bitmap i use to draw into, so i can startover fresh with them ? here's what ...
Updating image data using putImageData on a resized canvas element
I have a static image (a png) that I'm drawing on a canvas element using drawImage. var _canvas = null; var _context = null; var _curImageData; function copyImageToCanvas(aImg) { _canvas = document.getElementById("canvas"); var w = aImg.naturalWidth; var h = aImg.naturalHeight; _canvas.width = w; _canvas.height = h; _conte...
Making resizable image backgrounds with HTML, CSS, and Javascript
I'm trying to create an image object or canvas object that will resize based on the window dimensions, but keep the aspect ratio. Is this possible? I know that with canvas, you can maintain bicubic scaling, but is it possible to have the image scale on the window resize while maintaining the aspect ratio? ...
Is it okay to call canvas.drawWindow() from the "onload" handler?
The note at the bottom of this Mozilla wiki page currently says: "Using canvas.drawWindow() while handling a document's onload event doesn't work. In Firefox 3.5 or later, you can do this in a handler for the MozAfterPaint event to successfully draw HTML content into a canvas on page load." Which is fine, except that I tried it in Fire...
Multiple Canvas Zooms behaving erratically
I'm running into a problem with the HTML5 Canvas tag and adjusting the scale several times. After zooming twice, the canvas only uses a fraction of the available canvas height & width, even though I'm adjusting for the zoom level. <html> <head> <script> var ctx; var nScale = 1.00; function pageLoad() { ctx=document.getElementById(...
animation does not start in canvas on adnroid
Hello. I'm working on a game that requires drawing to SurfaceView's Canvas. I'm using SurfaceHolder to obtain Canvas to draw to, and perform drawing in a separate thread. Everything I draw displays correctly except for this one animation. Here is the animation definition (it is in res/drawable/ my_animation.xml: and here is how I ...
Drawing a picture in android
I want to draw a picture (bmp,jpg,png) into the canvas (using the onDraw() method) of a class that extends the View class. I would like to be able to draw parts of the picture, not the whole at once. I would really appreciate an example. ...
HTML 5 canvas random opacity issue
Could someone explain to me why this is fail. Trying to get the opacity to load as a random value. I cannot get this to render in anything but black even though the alert is clearly showing that I'm getting values between 0.00 and 1.00 Important Code: alert(Math.round(Math.random() * 100) / 100); <-- Tests to see if output is what i...
Error in crossfading images using <canvas>
I'm trying to crossfade images using the canvas drawImage() method. I'm using jQuery to fadeIn() and fadeOut() the canvas. Here's the code: $("#c").fadeOut(800,function() { //aw and ah are calculated here ctx = canvas.getContext('2d'); ctx.drawImage(img1, 0, 0, aw, ah); $("#c").fa...
Get Pixel Values from Android Canvas
Hi, I'm currently writing an Android game using surfaceView. I've optimized the game as much as possible and it runs quite smoothly. However, I have collision detection incorporated which is a bit messy. I would like to do collision detection by reading pixels directly from the canvas. Is this possible to do? The closest to this that I ...
[javascript] Click on given element in canvas.
Is there any trick to determine if user clicks on given element rendered in canvas? For example I'm displaying rhombus from .png file with transparent background and i want to know if user click inside or outside that figure (like mouse-element collision). ...
Canvas - Getting Image Position
Hi, I am using canvas,and I have this code - var myCanvas = document.getElementById("myCanvas"), ctx = null; // Check for support - Feature Support and not Browser Support if ( myCanvas.getContext) { // Getting the context future 3d ^_^ ctx = myCanvas.getContext("2d"); var googleLogo = ...
Develop Graph on J2ME
Hi All, I going to develop Graph on my j2me application i've taken Canvas & I wann to draw graph on particular data then ho i can draw graph ... Thanks, Neel, ...
Weird problem on android webview with canvas
I am draw some canvas charts on the android webview, and use javascript to change chart just by hiding and showing, and also change the title by reset its innerHTML. The title is just a normal html tag "<div id='title'></div>", The problem is that the page does not render well when I switch charts, for example. when I choosed to dis...
How do I represent used space in 2d?
I have fixed area 2d space filled with rectangles. I'd like to move the rectangles around, add new ones, remove some, but not allow them to overlap. If all of the rects are the same height and width (50x50px), what data structure should I use to store their position and what space they are using and what lookup method should I use agains...
Rotating a single image (but not the others) on an html5 canvas?
I have a sprite I'm animating on an html canvas using normal sprite sheet blitting. On certain key events I'd like to change the direction of the sprite (ie, flip it, or rotate it 180 degrees) without changing anything (the other sprites) on the canvas. Does anyone know how to do this? ...
Non-linear shadow in HTML design
Hi I'm trying to create a shadow that is wider in the top like in the picture below. It does not have to be very cross-browser, recent Firefox and WebKit based browser will do just fine. Does anyone have any good ideas on how to do this? ...
Not getting DragEnter/Over, Drop events in silverlight 4 app
I'm dragging UserControl objects from one Canvas to another with the intention of dropping there. When mousing over the destination, the dragged object actually goes under it. I get no DragEnter, DragOver or DragLeave events. If I drop the object there, I get no Drop event. My root object is a border, then a grid. The grid covers th...