canvas

HTML5 Canvas: Zooming

Hello. Is there any easy way how to zoom in and back out in canvas (JavaScript)? Basically I have a 400x400px canvas and I'd like to be able to zoom in with 'mousedown' (2x) and go back with 'mouseup'. Spent last two days googling, but no luck so far. :( Thanks for help. ...

IFrame-based Canvas app: fb_sig_ss only sent in unusual cases

I'm developing an IFrame-based Canvas app. I'm hoping to use Adobe's AS3 API to do the lion's share of work with retrieving and displaying the user's Facebook information (my current goal is to display a list of friends). The AS3 API expects that three values be passed down to the Flash movie from the IFrame page: fb_sig_api_key fb_sig_...

what is getCSSCanvasContext() method of an HTML5 element

what is the getCSSCanvasContext() method. i sow it in chrome debuging console, but cannont find any decent documentation for it. does it mean we can draw using canvas commands on any element? ...

Drawing images with canvas is more efficient than let browser to render it?

It seems google images search is using canvas to draw images and original images are hidden from the beginning. Have anyone tested that? ...

Is there a way to achieve Photoshop-like multiply, difference, etc layer effects with Canvas?

Hi, The title should say it all, I am looking for a way to achieve Photoshop-like layer effects such as multiply and difference (and screen) for Canvas + JavaScript. Also, is there a blur effect for Canvas? ...

HTML5 Canvas: globalCompositeOperation (eraser)

How can I use globalCompositeOperation for erasing something? http://canvaspaint.org/ has an eraser, but that's just a white line - ok only if your background is white... I know you can use ctx.clearRect(). But it didn't really worked for me because while dragging a mouse with eraser (set to 8x8px) it only makes unconnected 8x8px squa...

How to scale an imageData in HTML canvas?

I have a canvas in my webpage; I create a new Image data in this canvas then I modify some pixel through myImgData.data[] array. Now I would like to scale this image and make it bigger. I tried by scaling the context but the image remains small. Is it possible to do this? Thanks ...

Interpolating RGB color

I'm wrestling with how to interpolate a color, given a start_time and end_time, start_color and end_color. For simplicity, here is an example of how I'm thinking of doing it with just the red component: start_time = 0 end_time = 1 start_color = F //base 16 ftw end_color = 0 I can see how at time .5, red_out should be 8. This would be ...

How to get text on RectF ontouch event

Hello friends, I am writting a calendar app, in which I am drawing the RectF on the canvas & drawing text on it with canvas.drawText method, But when user clicks I want the calendar date on which user has clicked. Can any one please tell me? ...

Using Canvas & MIDlets

Hi, I am using Netbeans,with the given emulator for writing MIDlet programs. I really need a simple,understoodable good example of using canvas. Additional question:can I have TextField,buttons on a Canvas screen? If I can,then how,and if not what do you suggests? And last thing: is it possible to make some buttons by canvas and add it t...

HTML5 Canvas flip vertical function works in Firefox but not Chrome or Safari. why?!

Here is the code that works perfectly well in Firefox, but I just do not get why it does not work in Webkit browsers! Note: Im using jQuery to select the canvas element. (function() { flipV=function(imageData) { var n = new Array(); var d = imageData.data; // loop through over row ...

Continuous moving graph in android

I have developed a application which works like ECG Graph I have developed this using canvas and path. Once the plotting of lines are completed in my screen, it will start again from the 0 position. But the problem is that it gets starting overlapped. So how can i clear that particular position? ...

Removing an image from a canvas in HTML5

Hi, there's an example, which loads 2 images: canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); var img1 = new Image(); img.src = "/path/to/image/img1.png"; img.onload = function() { ctx.drawImage(img, 0, 0); }; var img2 = new Image(); img2.src = "/path/to/image/img2.png";...

Trouble with setInterval and undefined arguments

I'm trying to create a basic strobe light in the browser using the canvas element. I'm expecting setInterval to keep calling the changeBG function to change to a random background color. This function works fine on its own, but not when called by setInterval. I tried pulling up this page in firebug and it told me that colors was undefine...

Check if its the facebook canvas

I have a website which utilizes facebook integration. You can use it independently of FB. However, it also loads in FB through the canvas page. I want to load a different CSS file if the page is being displayed on the canvas page then when it is displayed through going to it directly. How can i check if the page loaded in the canvas ...

HTML5 Canvas layer issue

I have similar issue with layers as described here http://stackoverflow.com/questions/3008635/html5-canvas-element-multiple-layers But, accepted answer doesn't work for me, as for layer1 I have rendered image (drawImage) And second layer - layer2 (gradient) always under layer1. Sample code: canvas = document.getElementById("layer...

html canvas shape blur filter

There must be a way to do this. I have drawn a shape with the html5 canvas and I would like to blur it. As far as I know there is no native method so I assume a js library is needed. The problem is most libraries only blur images like this one for example. Is this possible? ...

WebKit TouchEvents - Not accurate?

I'm using the following to capture Touch Events on an Iphone. document.addEventListener('touchmove', function(event) { event.preventDefault(); var touch = event.touches[0]; $('#touchPosition').text("Touch x:" + touch.pageX + ", y:" + touch.pageY); }, false); Strangely, I'm finding that the positions are wrong...

What is the current state of the art in HTML canvas JavaScript libraries and frameworks?

I am currently investigating options for working with the canvas in a new HTML 5 application, and was wondering what is the current state of the art in HTML canvas JavaScript libraries and frameworks? In particular, are there frameworks that support the kind of things needed for game development - complex animation, managing scene graph...

Rotating an image in canvas and keeping it draggable

I have an image that I draw on a canvas. When the mouse clicks and drags I get the mouse coordinates and use them to set the positionX and Y of the image. After that's been done I redraw the canvas. That works like a charm and I can move the image over the canvas. But now I make 2 buttons so I can rotate the image left and right. When I...