Tag Archives: canvas

HTML5 Canvas Mouse Wheel Event

Questions: I can’t seem to get onMouseWheel events in an HTML5 canvas in Firefox. The following snippet works as expected in Chrome and IE9, but in Firefox I only receive the click event: <!DOCTYPE html> <html> <body> <canvas id=”TestCanvas” tabindex=”2″ onmousewheel=”window.alert(‘wheel!’)” onclick=”window.alert(‘click!’)” style=”width:90%;height:90%;margin-left:auto;margin-right:auto border:1px solid green;”></canvas> </body> </html> According to the specifications I’ve seen, onMouseWheel… Read More »

Fade out effect for text in HTML5 canvas

Questions: I’m drawing simple text in HTML5 canvas using this: context.fillStyle = “#FF0000” context.font = “italic 20pt Arial”; context.fillText(“sfddsfs”, 50, 50); Now I want to animate fade out of this text. How can that be done? Edit: I’m aware there’s currently no ready to use way to do this (at least I can’t find anything).… Read More »

HTML5 Canvas Mouse Wheel Event

Questions: I can’t seem to get onMouseWheel events in an HTML5 canvas in Firefox. The following snippet works as expected in Chrome and IE9, but in Firefox I only receive the click event: <!DOCTYPE html> <html> <body> <canvas id=”TestCanvas” tabindex=”2″ onmousewheel=”window.alert(‘wheel!’)” onclick=”window.alert(‘click!’)” style=”width:90%;height:90%;margin-left:auto;margin-right:auto border:1px solid green;”></canvas> </body> </html> According to the specifications I’ve seen, onMouseWheel… Read More »

Fade out effect for text in HTML5 canvas

Questions: I’m drawing simple text in HTML5 canvas using this: context.fillStyle = “#FF0000” context.font = “italic 20pt Arial”; context.fillText(“sfddsfs”, 50, 50); Now I want to animate fade out of this text. How can that be done? Edit: I’m aware there’s currently no ready to use way to do this (at least I can’t find anything).… Read More »

HTML Canvas: Multiple getContext plotting at same time

Questions: I’m building a tool using websockets which allows multiple users to “draw” on each others’ canvases. The user draws on a canvas, and an object containing mousedown/mouseup events and coordinates is pushed to other users instantaneously. This is then plotted on their canvases, which gives the effect of having multiple users drawing in the… Read More »

HTML5, JavaScript and drawing multiple rectangles in a canvas

Questions: Why won’t my multiple rectangles draw in the canvas? <!DOCTYPE html> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <title></title> <script src=”Scripts/jquery-1.9.1.min.js”></script> </head> <body> <canvas id=”myCanvas” width=”500″ height=”500″ style=”border:1px solid red”> <p>Your browser doesn’t support canvas.</p> </canvas> </body> </html> <script type =”text/javascript”> function Shape(x, y, w, h, fill) { this.x = x; this.y = y; this.w = w; this.h… Read More »

Android – Set a view to be on top of items drawn with canvas

Questions: I have an android app where the user paints, moves and reshapes some objects over a photo. In this page my screen layout consists of the photo that is loaded and below it (in portrait view) some buttons. My view looks exactly as I want it with the xml below: <RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”fill_parent” android:layout_height=”fill_parent”… Read More »

Canvas – Change colors of an image using HTML5/CSS/JS?

Questions: Is there a way to change colors of an image much like in Flash/ActionScript with using only HTML5/CSS/JavaScript? Here’s an example in Flash: http://www.kirupa.com/developer/actionscript/color.htm EDIT: This is the process I wish to duplicate. I’m trying to accomplish something like this (color changing aspect, preserving lighting and shadows): http://www.acura.com/ExteriorColor.aspx?model=TL WITHOUT loading & replacing a new… Read More »