Hi I already created a round shaped form for the first image in the first canvas, but I didn't succeed to use the dataURL of the first canvas and add it in the second canvas.
Here is my fiddle : http://jsfiddle.net/acbo6m6o/2/
var ctx = document.getElementById('canvas').getContext("2d");
var ctx2 = document.getElementById('canvas2').getContext("2d");
ctx.arc(150,150, 130, 0, Math.PI*2,true); // you can use any shape
ctx.clip();
var img = new Image();
img.addEventListener('load', function(e) {
ctx.drawImage(this, 0, 0, 300, 300);
img2.src=canvas.toDataURL();
}, true);
img.src="https://scontent-mad1-1.xx.fbcdn.net/v/t1.0-9/10400072_76198580294_2746326_n.jpg?oh=b8cc93c35d6badfffb65ab5c9cbfce28&oe=5941AAB6";
img2.src=canvas.toDataURL();
Thank you.
No need to grab the dataURL of first canvas. You can draw the first canvas itself into the second canvas using the drawImage() method :
var ctx = document.getElementById('canvas').getContext("2d");
var ctx2 = document.getElementById('canvas2').getContext("2d");
var img = new Image();
img.src = "https://scontent-mad1-1.xx.fbcdn.net/v/t1.0-9/10400072_76198580294_2746326_n.jpg?oh=b8cc93c35d6badfffb65ab5c9cbfce28&oe=5941AAB6";
img.addEventListener('load', function(e) {
ctx.arc(150, 150, 130, 0, Math.PI * 2, true);
ctx.save();
ctx.clip();
ctx.drawImage(this, 0, 0, 300, 300);
ctx.restore();
ctx2.drawImage(ctx.canvas, 0, 0);
}, true);
#canvas2 {
background-color: lightgrey;
}
<canvas width="300" height="300" id="canvas"></canvas>
<canvas width="300" height="300" id="canvas2"></canvas>
Related
I'm trying to extract a part of an image through the getImageData function for canvas.
The difficulty is that my part is rotated. My goal is to extract for example the rectangle on the image :
To draw the rectangle below, I use a translation and a rotation, but these functions don't work when we use getImageData.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0, img.width, img.height);
drawRect();
}
img.src = "https://dummyimage.com/300x150/5873f0/ffffff.jpg";
function drawRect() {
ctx.save();
ctx.translate(75, 100);
ctx.rotate(20 * Math.PI / 180)
// imgData = ctx.getImageData(-50, -25, 100, 50);
ctx.strokeStyle = 'black';
ctx.strokeRect(-50, -25, 100, 50);
ctx.restore()
}
<canvas id="myCanvas" width="300" height="150">
Your browser does not support the HTML5 canvas tag.</canvas>
This is the Fiddle I use. Thanks!
This is my code:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(55, 95, 30, 0, 2 * Math.PI);
var ctx1 = c.getContext("2d");
ctx1.rect(0, 0, 200, 300);
ctx.clip();
ctx.stroke();
var canvas = document.getElementById('myCanvas'),
context = canvas.getContext('2d');
make_base();
function make_base() {
base_image = new Image();
base_image.src = 'https://www.gravatar.com/avatar/4af2cdbaf02d97ba88d5d6daff94fbae/default=&s=80';
base_image.onload = function() {
context.drawImage(base_image, 15, 55);
}
}
canvas {
border: 1px solid #000000;
position: absolute;
top: 66px;
left: 22px;
}
<canvas id="myCanvas" width="236" height="413"></canvas>
From my code above I try to add image in to the circle and rectangle
I have done with add image in circle I try to add one more image in to the rectangle for the background but it seem not works.
You just need to create a second image and position it accordingly. Also use only one context, there is no need to declare it multiple times. Modified your code. I hope this will help you:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(55, 95, 30, 0, 2 * Math.PI);
ctx.rect(18, 150, 200, 250);
ctx.clip();
ctx.stroke();
make_base();
function make_base() {
base_image = new Image();
base_image.src = 'https://www.gravatar.com/avatar/4af2cdbaf02d97ba88d5d6daff94fbae/?default=&s=80';
base_image.onload = function() {
ctx.drawImage(base_image, 15, 55);
}
second_image = new Image();
second_image.src = 'https://www.gravatar.com/avatar/4af2cdbaf02d97ba88d5d6daff94fbae/?default=&s=80';
second_image.onload = function() {
ctx.drawImage(second_image, 19, 151);
}
}
<canvas id="myCanvas" width="236" height="413" style="border:1px solid #000000; position:absolute; top:66px; left:22px;"></canvas>
var testPhoto = new Image();
testPhoto.src = "http://plan9.bell-labs.com/plan9/img/9logo.jpg"
testPhoto.className = "pulse";
and then:
topSlice.drawImage(testPhoto, 100, 200, 40, 40);
It appears the pulsating effect doesn't work after drawing the image, how should I fix this? I'm following this tutorial for the pulsating effect.
You can use Window.requestAnimationFrame instead and work with blend modes / alpha blending:
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
image = new Image();
image.src = "http://plan9.bell-labs.com/plan9/img/9logo.jpg";
function update(timestamp) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.globalAlpha = Math.sin(timestamp/100) * 0.5 + 0.5;
context.drawImage(image, 0, 0);
window.requestAnimationFrame(update);
}
window.requestAnimationFrame(update);
<canvas id="canvas"></canvas>
In HTML5 canvas, I have a wheel, that I'm trying to spin, however the wheel is acting really crazy. It's being swung around the screen, out of it and into it again.
var canvas = document.getElementById("my-canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "http://www.roulette30.com/wp-content/uploads/americanroulette.png";
ctx.drawImage(img, 70, 70, 200, 200);
function spinWheel() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.translate(0, 0, canvas.width, canvas.height);
ctx.rotate(1 * Math.PI / 180);
ctx.drawImage(img, 70, 70, 200, 200);
}
setInterval(spinWheel, 0);
#my-canvas {
border: 1px solid black;
}
<!--<img id="my-image" height="200" width="200" src="http://www.roulette30.com/wp-content/uploads/americanroulette.png">
-->
<canvas id="my-canvas" width="400" height="400"></canvas>
I was certain that if I called the translate method, I could always have the wheel positioned in the center of the screen. Along with rotate, this was sure to work.
Any insights will be welcomed.
You need to translate outside of your spin code, to half width/height for dead center.
var canvas = document.getElementById("my-canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "http://www.roulette30.com/wp-content/uploads/americanroulette.png";
var speed = 1; // adding increases speed
var loop = true;
ctx.translate(canvas.width/2, canvas.height/2);
function spinWheel() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.rotate(speed * Math.PI / 180);
ctx.drawImage(img, -(img.width/2), -(img.height/2));
if (loop) requestAnimationFrame(spinWheel);
}
spinWheel();
#my-canvas {
border: 1px solid black;
}
<canvas id="my-canvas" width="400" height="400"></canvas>
I am currently testing using the <canvas> element to draw all of the backgrounds (I will add effects later to these images later and is the reason I'm not using CSS to load the images). That said, I'm currently having difficulty loading a image on to the canvas. Here is the code:
<html>
<head>
<title>Canvas image testing</title>
<script type="text/javascript">
function Test1() {
var ctx = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
//Loading of the home test image - img1
var img1 = new Image();
img1.src = 'img/Home.jpg';
//drawing of the test image - img1
img1.onload = function () {
//draw background image
ctx.drawimage(img1, 0, 0);
//draw a box over the top
ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
ctx.fillRect(0, 0, 500, 500);
};
}
}
</script>
<style type="text/css">
canvas { border: 2px solid black; width: 100%; height: 98%; }
</style>
</head>
<body onload="Test1();">
<canvas id="canvas" width="1280" height="720"></canvas>
</body>
</html>
I think that I'm not loading the image correctly, but I'm not sure.
There are a few things:
drawimage should be drawImage - note the capital i.
Your getElementById is looking for an element with ID of canvas, but it should be test1. canvas is the tag, not the ID.
Replace the canvas variable (e.g. in your canvas.getContext lines) with ctx, since that's the variable you've used to select your canvas element.
Bind your onload handler before you set the src of the image.
So your function should end up like this:
function Test1() {
var ctx = document.getElementById('test1');
if (ctx.getContext) {
ctx = ctx.getContext('2d');
//Loading of the home test image - img1
var img1 = new Image();
//drawing of the test image - img1
img1.onload = function () {
//draw background image
ctx.drawImage(img1, 0, 0);
//draw a box over the top
ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
ctx.fillRect(0, 0, 500, 500);
};
img1.src = 'img/Home.jpg';
}
}
Using newer JavaScript features:
let img = await loadImage("./my/image/path.jpg");
ctx.drawImage(img, 0, 0);
and the loadImage function looks like this:
function loadImage(url) {
return new Promise(r => { let i = new Image(); i.onload = (() => r(i)); i.src = url; });
}
move the onload event listener to before you set the src for the image.
var img1 = new Image();
//drawing of the test image - img1
img1.onload = function () {
//draw background image
ctx.drawImage(img1, 0, 0);
//draw a box over the top
ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
ctx.fillRect(0, 0, 500, 500);
};
img1.src = 'img/Home.jpg';
Assign your local file resource (url) to image source and draw image using context from canvas you want to load. That's it. See code bellow.
var loadImage = function (url, ctx) {
var img = new Image();
img.src = url
img.onload = function () {
ctx.drawImage(img, 0, 0);
}
}
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var img1 = new Image();
//drawing of the test image - img1
img1.onload = function () {
//draw background image
ctx.drawImage(img1, 0, 0);
//draw a box over the top
ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
ctx.fillRect(0, 0, 500, 500);
};
img1.src = 'img/Home.jpg';
<canvas id="canvas"></canvas>