Create links in HTML canvas

There is no easy way. You will have to draw the link text onto the canvas and then check for mouseclicks. Here is a demo html page: <html> <head> <script type=”text/javascript”> var canvas = document.getElementById(“myCanvas”); var ctx; var linkText=””; var linkX=5; var linkY=15; var linkHeight=10; var linkWidth; var inLink = false; // draw the balls … Read more

HTML5 Canvas – Fill circle with image

I did this the other day for a big thing I’m making; var thumbImg = document.createElement(‘img’); thumbImg.src=””; thumbImg.onload = function() {; tmpCtx.beginPath(); tmpCtx.arc(25, 25, 25, 0, Math.PI * 2, true); tmpCtx.closePath(); tmpCtx.clip(); tmpCtx.drawImage(thumbImg, 0, 0, 50, 50); tmpCtx.beginPath(); tmpCtx.arc(0, 0, 25, 0, Math.PI * 2, true); tmpCtx.clip(); tmpCtx.closePath(); tmpCtx.restore(); }; Worked perfect for me. … Read more

Why is putImageData so slow?

Just a small update on what the best way is to do this. I actually wrote my Bachelor Thesis on High Performance ECMAScript and HTML5 Canvas (pdf, German; password: stackoverflow), so I gathered some expertise on this topic by now. The clearly best solution is to use multiple canvas elements. Drawing from one canvas onto … Read more

How can I use custom fonts in an HTML5 Canvas element?

I’ve thrown together a simple demo on jsfiddle here showing how to do this with @font-face: Opera also has a simple tutorial on using <canvas>, including the text API. CSS: @font-face { font-family: ‘KulminoituvaRegular’; src: url(‘’); } Javascript: var ctx = document.getElementById(‘c’).getContext(‘2d’); var kitty = new Image(); kitty.src=””; kitty.onload = function(){ ctx.drawImage(this, 0,0,this.width, this.height); … Read more

HTML5 Dynamically create Canvas

The problem is that you do not insert your canvas element in the document body. Just do the following: document.body.appendChild(canvas); Example: var canvas = document.createElement(‘canvas’); = “CursorLayer”; canvas.width = 1224; canvas.height = 768; = 8; = “absolute”; = “1px solid”; var body = document.getElementsByTagName(“body”)[0]; body.appendChild(canvas); cursorLayer = document.getElementById(“CursorLayer”); console.log(cursorLayer); // below … Read more

Calculate exact character\string height in javascript

Width is easy: canvas’s context has a built in metric for measuring text width. // this will measure text width context.font=”14pt Verdana”; var m=context.measureText(yourText); var theWidth=m.width; Height is more difficult because measureText doesn’t compute height. You can often use the font size to approximate the height–that’s what I do. But if you really need more … Read more

Draw HTML5/Javascript Canvas Path in Time

A Demo drawing a complex path using uniformly spaced points: An overview of Uniform Speed “Speed” is defined as distance per unit of time. “Uniform Speed” is therefore traveling a consistent specified distance per unit of time. So, moving along your path at 2 pixels per 1/60th second would be an example of moving … Read more

How to find the coordinates of the buttons on a canvas, and click on them after using Java and Selenium?

The <canvas> element is within an <iframe>. So to invoke click() on the elements within the <canvas> you have to: Induce WebDriverWait for the desired frame to be available and switch to it. Induce WebDriverWait for the desired element to be clickable. You can use the following solution: Code Block: driver.get(“”) new WebDriverWait(driver, 10).until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(“fullframe”))); WebElement … Read more

Swing method akin to HTML5’s canvas.putImageData(arrayOfPixels, 0,0)

BufferedImage is probably the most flexible choice. You can use it as an Icon or override paintComponent() for the full generality of Java2D. package overflow; import java.awt.BorderLayout; import java.awt.Color; import java.awt.Dimension; import java.awt.Graphics; import java.awt.GridLayout; import java.awt.image.BufferedImage; import java.util.ArrayList; import java.util.List; import javax.swing.Icon; import javax.swing.ImageIcon; import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.JPanel; import javax.swing.SwingUtilities; /** @see … Read more