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>
Related
I am trying to give transparency to a single image that I have created on the canvas, globalAlpha does not work for me because I need to only affect one image and that affects all images.
var canvas = document.getElementById('cvs');
var ctx = canvas.getContext('2d');
var image = new Image();
image.src = "../img/image.jpg";
image.onload = function () {
ctx.drawImage(image, 200, 200, 100, 100);
}
var image1 = new Image();
image1.src = "../img/image.jpg";
image1.onload = function () {
ctx.drawImage(image1, 400, 400, 100, 100);
}
Set globalAlpha to your transparency level, draw the image, return globalAlpha to 1.
You can set the ctx global alpha around render.
image1.onload = function () {
// Save the original alpha
ctx.save();
// Set global alpha
ctx.globalAlpha = 0.5;
// Draw
ctx.drawImage(image1, 400, 400, 100, 100);
// Restore the original alpha
ctx.restore();
}
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>
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>
I wrote a canvas js program, but it doesn't work if I use the DOM element in ubuntu 13.04 chromium(it is fine in firefox 23.0). Here is the code:
<body>
<canvas id="map" width="600" height="600"></canvas>
<img id="photo" src="jiuwo.jpg" style="display:none;">
<img id="frame" src="frame.png" style="display:none;">
</body>
<script type="text/javascript">
function drawGallary(){
var canvas = document.getElementById('map');
if(canvas.getContext){
var ctx = canvas.getContext('2d');
var img1 = document.getElementById('photo');
var img2 = document.getElementById('frame');
ctx.drawImage(img1, 300, 300, 100, 100, 20, 21, 100, 100); // block of image
ctx.drawImage(img2, 0, 0);
}
}
</script>
I found that if I put the drawImage into onload function ,it works well:
function drawGallary2(){
var canvas = document.getElementById('map');
if(canvas.getContext){
var ctx = canvas.getContext('2d');
var img1 = new Image();
img1.src = "jiuwo.jpg";
img1.onload = function(){
ctx.drawImage(img1, 300, 300, 100, 100, 20, 21, 100, 100);
}
var img2 = document.getElementById('frame');
img2.onload = function(){
ctx.drawImage(img2, 0, 0);
}
}
}
is that onload needed if using the DOM element to be the image source? Thanks.
Make sure you give time for the page to fully load using window.onload.
That way your images are fully available to draw on the canvas.
// wait until the page is fully loaded
window.onload = function() {
function drawGallary(){
var canvas = document.getElementById('map');
if(canvas.getContext){
var ctx = canvas.getContext('2d');
var img1 = document.getElementById('photo');
var img2 = document.getElementById('frame');
ctx.drawImage(img1, 300, 300, 100, 100, 20, 21, 100, 100);
ctx.drawImage(img2, 0, 0);
}
}
} // end window.onload
I found out I cannot do that (adding text IN a picture) with HTML , I found a way with JAVA but I am intresting in finding a way by using Javascript.
You can do it using canvas,
<canvas id="canvas" width="340" height="340"></canvas>
Script,
function addTextToImage(imagePath, text) {
var circle_canvas = document.getElementById("canvas");
var context = circle_canvas.getContext("2d");
// Draw Image function
var img = new Image();
img.src = imagePath;
img.onload = function () {
context.drawImage(img, 0, 0);
context.lineWidth = 1;
context.fillStyle = "#CC00FF";
context.lineStyle = "#ffff00";
context.font = "18px sans-serif";
context.fillText(text, 50, 50);
};
}
addTextToImage("http://www.gravatar.com/avatar/0c7c99dec43bb0062494520e57f0b9ae?s=256&d=identicon&r=PG", "Your text");
http://jsfiddle.net/wAY6Y/