HTML5 canvas drawImage with at an angle

You need to modify the transformation matrix before drawing the image that you want rotated. Assume image points to an HTMLImageElement object. var x = canvas.width / 2; var y = canvas.height / 2; var width = image.width; var height = image.height; context.translate(x, y); context.rotate(angleInRadians); context.drawImage(image, -width / 2, -height / 2, width, height); context.rotate(-angleInRadians); … Read more

How to draw an image over another image?

Another approach that does not require extending components. import javax.swing.*; import java.awt.*; import java.awt.image.*; import java.awt.event.ActionListener; import java.awt.event.ActionEvent; import java.util.Random; import java.net.URL; import javax.imageio.ImageIO; public class ImageOnImage { ImageOnImage(final BufferedImage bg, BufferedImage fg) { final BufferedImage scaled = new BufferedImage( fg.getWidth()/2,fg.getHeight()/2,BufferedImage.TYPE_INT_RGB); Graphics g = scaled.getGraphics(); g.drawImage(fg,0,0,scaled.getWidth(),scaled.getHeight(),null); g.dispose(); final int xMax = bg.getWidth()-scaled.getWidth(); final int yMax … Read more