Guess the title of the post may need editing, but for now I don't know where the problems are. I have read pages and answers to similar questions, here and elsewhere. One Stack Overflow answer is especially close, but I don't understand it.
I want a function, to draw polygons on canvas at desired coordinates and to fill them with some background image loaded from a file (large enough that no tiling is needed). Triangles would be fine for a test. Apparently I should use drawImage and clip, and to give the polygon a border, I can resuse the same path for the clip and the stroke. Also apparently I should keep the order of
- define path
- save
- clip
- drawImage
- restore
- stroke.
Also read somewhere that it is enough to load the image once. (If uou want me to quote sources for all these assumptions, I will look for where I saw them. Most of them on Stack Overflow)
The HTML is an otherwise empty
<body onload = "main ();"></body>
First approach, pretending that the browser will wait for the picture to load:
var ctx, img;
var image_path = 'bg.jpg';
function main () {
var CANVAS_SIZE = 600;
var view_field_cnv = document.createElement ('canvas');
view_field_cnv.width = CANVAS_SIZE;
view_field_cnv.height = CANVAS_SIZE;
view_field_cnv.style.border = "1px solid";
document.body.appendChild (view_field_cnv);
ctx = view_field_cnv.getContext ('2d');
img = document.createElement ('img');
img.src = image_path;
place_triangle (0, 0);
place_triangle (300, 300);
place_triangle (500, 500);
place_triangle (0, 0);
}
function place_triangle (x, y) {
console.log (x, y);
ctx.beginPath ();
ctx.moveTo (x + 10, y);
ctx.lineTo (x + 110, y);
ctx.lineTo (x + 60, y + 40);
ctx.closePath ();
img = document.createElement ('img');
img.src = image_path;
ctx.save ();
ctx.clip ();
ctx.drawImage (img, x, y);
ctx.restore ();
ctx.stroke ();
}
That draws all three triangles but no clipped images.
Second try, with drawImage inside image.onload:
var ctx;
var image_path = 'bg.jpg';
function main () {
var CANVAS_SIZE = 600;
var view_field_cnv = document.createElement ('canvas');
view_field_cnv.width = CANVAS_SIZE;
view_field_cnv.height = CANVAS_SIZE;
view_field_cnv.style.border = "1px solid";
document.body.appendChild (view_field_cnv);
ctx = view_field_cnv.getContext ('2d');
place_triangle (0, 0);
place_triangle (300, 300);
place_triangle (500, 500);
place_triangle (0, 0);
}
function place_triangle (x, y) {
console.log (x, y);
var img;
ctx.beginPath ();
ctx.moveTo (x + 10, y);
ctx.lineTo (x + 110, y);
ctx.lineTo (x + 60, y + 40);
ctx.closePath ();
img = document.createElement ('img');
img.src = image_path;
img.onload = function () {
ctx.save ();
ctx.clip ();
ctx.drawImage (img, x, y);
ctx.restore ();
ctx.stroke ();
}
}
This one does draw the clipped image, but only one triangle, the last one. Just commenting out save and restore doesn't help.
So, I don't understand loading images, saving, restoring and probably a million other things. Where be the bugs?
I see you already understand the basics of clipping:
save context, define path, clip, drawImage, restore context.
you can stroke after restore if you want the stroke to slightly overlap the clipped image.
you can stroke before clipping if you don't want the stroke to overlap the clipped image.
Here's example code and a Demo: http://jsfiddle.net/m1erickson/p0fup425/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// image loader
// put the paths to your images in imageURLs[]
var imageURLs=[];
// push all your image urls!
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/norwayFlag.jpg");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/swedishFlag.jpg");
// the loaded images will be placed in images[]
var imgs=[];
var imagesOK=0;
loadAllImages(start);
function loadAllImages(callback){
for (var i=0; i<imageURLs.length; i++) {
var img = new Image();
imgs.push(img);
img.onload = function(){
imagesOK++;
if (imagesOK>=imageURLs.length ) {
callback();
}
};
img.onerror=function(){alert("image load failed");}
img.crossOrigin="anonymous";
img.src = imageURLs[i];
}
}
function start(){
// the imgs[] array now holds fully loaded images
// the imgs[] are in the same order as imageURLs[]
// clip image#1
clippingPath([10,70,50,10,90,70],imgs[0],10,10);
// clip image#2
clippingPath([10,170,50,110,90,170],imgs[1],10,110);
// append the original images for demo purposes
document.body.appendChild(imgs[0]);
document.body.appendChild(imgs[1]);
}
function clippingPath(pathPoints,img,x,y){
// save the unclipped context
ctx.save();
// define the path that will be clipped to
ctx.beginPath();
ctx.moveTo(pathPoints[0],pathPoints[1]);
// this demo has a known number of polygon points
// but include a loop of "lineTo's" if you have a variable number of points
ctx.lineTo(pathPoints[2],pathPoints[3]);
ctx.lineTo(pathPoints[4],pathPoints[5]);
ctx.closePath();
// stroke the path
// half of the stroke is outside the path
// the outside part of the stroke will survive the clipping that follows
ctx.lineWidth=2;
ctx.stroke();
// make the current path a clipping path
ctx.clip();
// draw the image which will be clipped except in the clipping path
ctx.drawImage(img,x,y);
// restore the unclipped context (==undo the clipping path)
ctx.restore();
}
}); // end $(function(){});
</script>
</head>
<body>
<p>Images clipped inside triangular canvas paths</p>
<canvas id="canvas" width=150 height=200></canvas>
<p>Original Images</p>
</body>
</html>
#markE
Images in example are gone.
I cut them from screenshot above and uploaded to our own site and clones/updated the fiddle: http://jsfiddle.net/6gawtudc/
I can't comment on previous answer because of lack of reputation points.
please someone update the answer or reupload the images
imageURLs.push("https://images.v3.webhome.nl/flags_for_polygon/norway.png");
imageURLs.push("https://images.v3.webhome.nl/flags_for_polygon/sweden.png");
Related
This question already has an answer here:
HTML Canvas: Drawing grid below a plot
(1 answer)
Closed 6 years ago.
I have a canvas, and I want to use drawImage to draw an image behind the current content on the canvas.
Due to the fact that there is content already on the canvas (I'm using Literally Canvas to create a canvas containing an image, so I can't really draw the image first), I cannot use drawImage before I render the rest of my content.
Is it possible to drawImage behind all other content on a canvas?
Yes you can just use globalCompositeOperation destination-over, but note that your first image needs some transparency, otherwise, you will obviously not see anything :
var img1 = new Image();
var img2 = new Image();
var loaded = 0;
var imageLoad = function(){
if(++loaded == 2){
draw();
}
};
img1.onload = img2.onload = imageLoad;
var draw = function(){
var ctx = c.getContext('2d');
ctx.drawImage(img1, 100,100);
// wait a little bit before drawing the background image
setTimeout(function(){
ctx.globalCompositeOperation = 'destination-over';
ctx.drawImage(img2, 0,0);
}, 500);
}
img1.src = "https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png";
img2.src = "https://picsum.photos/200/200";
<canvas id="c" width="200" height="200"></canvas>
Sorry about the previous post, I didn't properly read your post
Perhaps you could save the canvas, draw your image, and then reload the old content on top of your drawn image? Here's some JS psuedocode:
var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
ctx.drawImage('Your Image Watermark Stuff');
ctx.putImageData(imgData,0,0);
You can use KonvaJS. And then use layers for it.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/konvajs/konva/0.13.0/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Rect Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Konva.Layer();
var imageObj = new Image();
imageObj.onload = function() {
var baseImage = new Konva.Image({
x: 50,
y: 50,
width: width,
height: height,
image: image
});
// add the shape to the layer
layer.add(rect);
// add the layer to the stage
stage.add(layer);
};
imageObj.src = 'url to your image'
</script>
</body>
</html>
A simple solution would be to use another canvas behind the first one.
Normally canvas pixels are initialized to transparent black and therefore are perfectly see-through.
If your first canvas is created opaque instead the only other option I can think to is
create a temporary canvas of the same size
draw your image in this temporary canvas
get the ImageData object of both the temporary canvas and of the original canvas
copy from the temporary canvas to the original canvas only where the original canvas is not set at the background color
In code:
var tmpcanvas = document.createElement("canvas");
tmpcanvas.width = canvas.width;
tmpcanvas.height = canvas.height;
var temp_ctx = tmpcanvas.getContext("2d");
// ... draw your image into temporary context ...
var temp_idata = temp_ctx.getImageData(0, 0, canvas.width, canvas.height);
var temp_data = temp_idata.data;
// Access the original canvas pixels
var ctx = canvas.getContext("2d");
var idata = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = idata.data;
// Find the background color (here I'll use first top-left pixel)
var br_r = data[0], bg_g = data[1], bg_b = data[2];
// Replace all background pixels with pixels from temp image
for (var i=0,n=canvas.width*canvas.height*4; i<n; i+=4) {
if (data[i] == bg_r && data[i+1] == bg_g && data[i+2] == bg_b) {
data[i] = tmp_data[i];
data[i+1] = tmp_data[i+1];
data[i+2] = tmp_data[i+2];
data[i+3] = tmp_data[i+3];
}
}
// Update the canvas
ctx.putImageData(idata, 0, 0);
this approach however will have a lower quality if the original canvas graphics has been drawn with antialiasing or if pixels of the background color are also used in the image (e.g. an object on #FFF white background where object highlights are also #FFF). Another problem is if the background color is not a perfectly uniform RGB value (this will happen if the image has been compressed with a lossy algorithm like jpeg).
All these problems could be mitigated with more sophisticated algorithms like range matching, morphological adjustments and color-to-alpha conversions (basically the same machinery used for chroma-keying).
I found this helpful tutorial
http://www.rgraph.net/blog/2013/february/an-example-of-the-html5-canvas-ispointinpath-function.html
i copied it into my own text editor and nothing happens when I open it. I changed it by adding a declaration
<!DOCTYPE html>
<html lang="en">
<head>
<title>exampleMouseOver</title>
</head>
<script>
window.onload = function (e)
{
var canvas = document.getElementById('cvs');
var context = canvas.getContext('2d');
// Draw the rectangle
context.beginPath();
context.rect(50,50,100,100);
context.fill();
context.fillStyle = 'red';
// Draw the circle
context.beginPath();
context.arc(450,175, 50, 0,2 * Math.PI, false);
context.fill();
context.fillStyle = 'green';
// Draw the shape
context.beginPath();
context.moveTo(250,100);
context.lineTo(350,175);
context.lineTo(325,215);
context.lineTo(185,195);
context.fill();
canvas.onmousemove = function (e)
{
var canvas = e.target;
var context = canvas.getContext('2d');
// This gets the mouse coordinates (relative to the canvas)
var mouseXY = RGraph.getMouseXY(e);
var mouseX = mouseXY[0];
var mouseY = mouseXY[1];
// Replay the rectangle path (no need to fill() it) and test it
context.beginPath();
context.rect(50,50,100,100);
if (context.isPointInPath(mouseX, mouseY)) {
canvas.style.cursor = 'pointer';
return;
}
///////////////////////////////////////////////////////////////
// Replay the circle path (no need to fill() it) and test it
context.beginPath();
context.arc(450,175, 50, 0,2 * Math.PI, false);
if (context.isPointInPath(mouseX, mouseY)) {
canvas.style.cursor = 'pointer';
return;
}
///////////////////////////////////////////////////////////////
// Replay the irregular shape path (no need to fill() it) and test it
context.beginPath();
context.moveTo(250,100);
context.lineTo(350,175);
context.lineTo(325,215);
context.lineTo(185,195);
if (context.isPointInPath(mouseX, mouseY)) {
canvas.style.cursor = 'pointer';
return;
}
///////////////////////////////////////////////////////////////
// Return the cursor to the default style
canvas.style.cursor = 'default';
}
}
</script>
</html>
You'll need a body element and a canvas element. Also your script element needs to be inside either your head element or your body element.
The following is what the sample was using, but did not include in their sample code:
<body>
<canvas id="cvs" width="600" height="250" style="border: 1px solid gray; cursor: pointer;">[No canvas support]</canvas>
</body>
Edit: Additionally the code is calling "RGraph.getMouseXY(e)", which is in a library file that you are not referencing. You can either add a reference to that library or get the mouse position yourself.
If you want to use other parts of the RGraph library, for drawing charts, you should add the library. To add the library you should follow the instructions on the RGraph site related to downloading and starting with RGraph (http://www.rgraph.net/docs/starting-with-rgraph.html).
If this was just a sample that happened to do what you wanted to do, you should get the mouse position yourself. You can do this by changing these lines:
var mouseXY = RGraph.getMouseXY(e);
var mouseX = mouseXY[0];
var mouseY = mouseXY[1];
to these:
var mouseX = e.clientX - canvas.getBoundingClientRect().left;
var mouseY = e.clientY - canvas.getBoundingClientRect().top;
This may not be the most robust solution, but it should suffice for your purposes. Essentially you are getting the mouse position in the window, then subtracting the top-left of the canvas in the window, so that you are left with the mouse position in the canvas.
I have to draw 3 images on the canvas and need to rotate 2 of the images.
The images are like
1. circular with a vertical straight line
2. just an horizontal line
3. Big circular image
I need to rotate the 1st 2 images in the center of the canvas.
var canvas = document.getElementById('NewImage');
var context = canvas.getContext('2d');
context.canvas.width = window.innerWidth;
context.canvas.height = window.innerHeight*0.7;
var imageObj = new Image();
var imageObj2 = new Image();
var imageObj3 = new Image();
imageObj.onload = function() {
context.save();
context.translate(imageObj.width/2,imageObj.height/2);
context.rotate(-10*Math.PI/180);
//context.translate(-imageObj.width/2,-imageObj.height/2);
context.drawImage(imageObj,-(imageObj.width/2),-(imageObj.height/2),context.canvas.width,context.canvas.height*0.85);
context.restore();
context.save();
context.globalCompositeOperation="source-over";
context.translate(imageObj2.width/2,imageObj2.height/2);
context.rotate(-10*Math.PI/180);
context.translate(-imageObj2.width/2,-imageObj2.height/2);
context.drawImage(imageObj2, x, y,context.canvas.width,6);
context.restore();
//context.rotate(10*Math.PI/180);
context.drawImage(imageObj3, 0, 0,context.canvas.width,context.canvas.height*0.9);
};
imageObj.src = 'canvas/inner_circle_blackline_vertical.png';
imageObj2.src = 'canvas/horizontal.png';
imageObj3.src = 'canvas/outer_circle.png';
When i try to rotate, the images are not rotating in center. when 1st 2 images rotates it has to look like "X" symbol.
How will i rotate in center of the canvas.
Thanks:)
As designed, your imageObj2 and imageObj3 will never load.
Here is a generic image loader that will load all your images and store them in an array called imgs[].
When all your images have fully loaded, the render() function will be called. That’s where you start drawing.
// This is an image loader
// When render() is called, all your images are fully loaded
var imgURLs = [
"https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png",
"https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png",
"https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png"];
var imgs=[];
var imgCount=0;
pre_load();
function pre_load(){
for(var i=0;i<imgURLs.length;i++){
var img=new Image();
imgs.push(img);
img.onload=function(){
if(++imgCount>=imgs.length){
// images are now fully loaded
render();
}
}
img.src=imgURLs[i];
}
}
In render(), you just draw your images.
Since the same action (rotating an image) is done repeatedly, you can create a helper function to do the rotated drawing. Here the helper function is drawImageAtAngle.
// draw the rotated lines on the canvas
function render(){
var x=canvas.width/2;
var y=canvas.height/2;
drawImageAtAngle(imgs[0],x,y,-45);
drawImageAtAngle(imgs[2],x,y,45);
drawImageAtAngle(imgs[1],x,y,0);
}
Here the helper function that rotates a supplied image to a supplied angle:
function drawImageAtAngle(image,X,Y,degrees){
var radians=degrees*Math.PI/180;
var halfWidth=image.width/2;
var halfHeight=image.height/2;
ctx.beginPath();
ctx.save();
ctx.translate(X,Y);
ctx.rotate(radians);
ctx.drawImage(image,-halfWidth,-halfHeight);
ctx.restore();
}
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/ZShWW/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:10px;}
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// This is an image loader
// When render() is called, all your images are fully loaded
var imgURLs = [
"https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png",
"https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png",
"https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png"];
var imgs=[];
var imgCount=0;
pre_load();
function pre_load(){
for(var i=0;i<imgURLs.length;i++){
var img=new Image();
imgs.push(img);
img.onload=function(){
if(++imgCount>=imgs.length){
// images are now fully loaded
render();
}
}
img.src=imgURLs[i];
}
}
// draw the rotated lines on the canvas
function render(){
var x=canvas.width/2;
var y=canvas.height/2;
drawImageAtAngle(imgs[0],x,y,-45);
drawImageAtAngle(imgs[2],x,y,45);
drawImageAtAngle(imgs[1],x,y,0);
}
function drawImageAtAngle(image,X,Y,degrees){
var radians=degrees*Math.PI/180;
var halfWidth=image.width/2;
var halfHeight=image.height/2;
ctx.beginPath();
ctx.save();
ctx.translate(X,Y);
ctx.rotate(radians);
ctx.drawImage(image,-halfWidth,-halfHeight);
ctx.restore();
}
}); // end $(function(){});
</script>
</head>
<body>
<p>This is the line image</p>
<img src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png">
<p>The line image rotated at center of canvas</p>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
To find the center of the canvas you have to use the dimensions of the canvas. In your code you are using the dimensions of the image. That is, this line:
context.translate(imageObj.width/2,imageObj.height/2);
should probably be:
context.translate(canvas.width/2,canvas.height/2);
That moves you to the center of the canvas. The rotation then occurs around that center. You are then drawing the image centered on the origin. That part looks correct.
You will then reverse the rotation and then the translation.
I am trying to make a simple game, though if I need an image for my bouncing ball then how do I do this?
I am doing this-
function draw() {
ctx.clearRect(0, 0, 300, 300);
if (ctx.getContext) {
Snooker = new Image();
Snooker.onload = loadingComplete;
Snooker.src = "http://www.wpclipart.com/toys/balls/red_snooker_ball.png";
}
x += dx;
y += dy;
bounce();
}
And->
function init() {
var ctx = document.getElementById("canvas");
return setInterval(draw, 10);
}
Now canvas is blank.
Here is fiddle link-
http://jsfiddle.net/stackmanoz/QcLTw/1/
Image I want to add instead of this simple ball-
http://www.wpclipart.com/toys/balls/red_snooker_ball.png
Here is a working version of your script using the image instead of the arc. You would want to load an img using Javascript's new Image() and then set the source to the image you want. Then use drawImage instead of arc.
http://jsfiddle.net/QcLTw/7/
Just giving canvas a go for the first time with the intention of creating a game. I have an image displaying but oddly the fillStyle method doesn't seem to be working. ( At least the canvas background is still white in google chrome.)
Note that in my code the canvas var is actually the canvas elements 2d context, maybe that's where i'm getting myself confused? i can't see the problem, would appreciate if anyone else could.
LD24.js:
const FPS = 30;
var canvasWidth = 0;
var canvasHeight = 0;
var xPos = 0;
var yPos = 0;
var smiley = new Image();
smiley.src = "http://javascript-tutorials.googlecode.com/files/jsplatformer1-smiley.jpg";
var canvas = null;
window.onload = init; //set init function to be called onload
function init(){
canvasWidth = document.getElementById('canvas').width;
canvasHeight = document.getElementById('canvas').height;
canvas = document.getElementById('canvas').getContext('2d');
setInterval(function(){
update();
draw();
}, 1000/FPS);
}
function update(){
}
function draw()
{
canvas.clearRect(0,0,canvasWidth,canvasHeight);
canvas.fillStyle = "#FFAA33"; //orange fill
canvas.drawImage(smiley, xPos, yPos);
}
LD24.html:
<html>
<head>
<script language="javascript" type="text/javascript" src="LD24.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="600">
<p> Your browser does not support the canvas element needed to play this game :(</p>
</canvas>
</body>
</html>
3 notes:
fillStyle does not cause your canvas to be filled. It means that when you fill a shape it will be filled with that color. Therefore you need to write canvas.fillRect( xPos, yPos, width, height).
Wait until your image actually loads, otherwise the rendering may be inconsistent or buggy.
Careful of cross-domain images used in your canvas - most browsers will throw a security exception and stop executing your code.
Wait till image loads as well:
var img = new Image();
img.onload = function() {
handleLoadedTexture(img);
};
img.src = "image.png";
function handleLoadedTexture(img) {
//call loop etc that uses image
};
Or maybe you were just missing
canvas.fill();
after
canvas.drawImage(smiley, xPos, yPos);