How can I place a blue box between red and green one using this function?
I need to achieve this effect.
Here's a Codepen.
HTML
<canvas id="canvas">
</canvas>
JS
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
window.onload = draw;
green = new Image;
green.src = 'http://www.thebouncingbox.com/images/thumbnail/produkte/large/California-Sunbounce-meterware-green-box.jpg';
red = new Image;
red.src = 'http://www.front-porch-ideas-and-more.com/image-files/color-red.jpg';
blue = new Image;
blue.src = 'http://s3.amazonaws.com/colorcombos-images/colors/000066.png';
function draw() {
ctx.drawImage(green, 0, 0, 200, 200);
ctx.drawImage(red, 80, 50, 120, 100);
ctx.drawImage(blue, 60, 30, 100, 100);
}
You need to listen onload event of the image before drawing it. To have images over image, series operation will help!
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
window.onload = draw1;
function draw1() {
var green = new Image();
green.onload = function() {
ctx.drawImage(green, 0, 0, 200, 200);
draw2();
};
green.src = 'http://www.thebouncingbox.com/images/thumbnail/produkte/large/California-Sunbounce-meterware-green-box.jpg';
}
function draw2() {
var blue = new Image;
blue.onload = function() {
ctx.drawImage(blue, 50, 50, 100, 100);
draw3();
};
blue.src = 'http://s3.amazonaws.com/colorcombos-images/colors/000066.png';
}
function draw3() {
var red = new Image();
red.onload = function() {
ctx.drawImage(red, 100, 100, 100, 100);
};
red.src = 'http://www.front-porch-ideas-and-more.com/image-files/color-red.jpg';
}
<canvas id="canvas" width="200" height="200"></canvas>
Why not change the order you draw them?
function draw() {
ctx.drawImage(green, 0, 0, 200, 200);
ctx.drawImage(blue, 60, 30, 100, 100);
ctx.drawImage(red, 80, 50, 120, 100);
}
Related
I need help with fabric js
I want to create a group of clips, the group can have many clips next to each other. Each clip can have an image inside it.
similar to the grid function in canva
group of 2 clip masks with space between them
this is what I have so far it displays in a very weird shape
http://jsfiddle.net/SallyMagdyTadros/ZxYCP/1467/
<canvas id="c" width="400" height="400"></canvas>
var img01URL = 'https://www.google.com/images/srpr/logo4w.png';
(function() {
var canvas = this.__canvas = new fabric.Canvas('c');
fabric.Object.prototype.transparentCorners = false;
var img2;
fabric.Image.fromURL('http://fabricjs.com/lib/pug.jpg', function(img) {
img2 = img.scale(0.5).set({
left: 100,
top: 0,
clipTo: function(ctx) {
ctx.rect(0, 0, 100, 200);
}
});
});
fabric.Image.fromURL('https://www.google.com/images/srpr/logo4w.png',
function(img) {
img.scale(0.5).set({
left: 0,
top: 0,
clipTo: function(ctx) {
ctx.rect(0, 0, 200, 100);
}
});
var group = new fabric.Group([img, img2], {
});
group.left = 0;
group.top = 0;
canvas.add(group);
});
})();
I did this image with my canvas because I had to modify it and merge two images. However I don't want to show it on my html page but use the url saved of the second canvas in my javascript.
How can I do that ?
Here is my fiddle : http://jsfiddle.net/acbo6m6o/7/
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";
var img2 = new Image();
img2.src = "https://icc-static-files.s3.amazonaws.com/ICC/photo/2017/01/31/f3a228a9-30ca-453e-99c5-ee6150c714a5/Facebook_Logo.png";
img.addEventListener('load', function(e) {
ctx.arc(150, 150, 150, 0, Math.PI * 2, true);
ctx.save();
ctx.clip();
ctx.drawImage(this, 0, 0, 300, 300);
ctx.restore();
ctx2.drawImage(ctx.canvas, 35, 60, 230, 230);
ctx2.drawImage(img2, 200, 60, 75, 75);
}, true);
var dataURL = canvas2.toDataURL();
var dataURL = canvas2.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href=dataURL; //it save local
I have a problem. I am creating simple game in Canvas using JavaScript. Image doesn't display after call clearRect(), does anyone know, how to solve it?
var left1 = 0;
var context1 = document.getElementById('canvas1').getContext('2d');
render1();
function render1() {
var image = new Image();
image.onload = function () {
context1.drawImage(image, left1, 0, 200, 200);
};
image.src = 'http://www.pngall.com/wp-content/uploads/2016/06/Earth-Free-Download-PNG.png';
left1++;
requestAnimationFrame(render1);
}
var left2 = 0;
var context2 = document.getElementById('canvas2').getContext('2d');
render2();
function render2() {
context2.clearRect(0, 0, 500, 250);
var image = new Image();
image.onload = function () {
context2.drawImage(image, left2, 0, 200, 200);
};
image.src = 'http://www.pngall.com/wp-content/uploads/2016/06/Earth-Free-Download-PNG.png';
left2++;
requestAnimationFrame(render2);
}
canvas {
display: block;
}
It works, but old images are not deleted:
<canvas id="canvas1" height="250" width="500"></canvas>
It doesn't work, because of clearRect():
<canvas id="canvas2" height="250" width="500"></canvas>
if you try to animate your image , its not necessary to make two canvas instead use a timer , i hope this will help
`
var left1 = 0;
var context1 = document.getElementById('canvas1').getContext('2d');
var canvas1 = document.getElementById('canvas1');
window.onload = init;
function init() {
setInterval(drawc, 1000 / 60);
};
function drawc() {
if (left1 > canvas1.width) {
left1 = 0;
}
render1();
}
function render1() {
with(context1) {
clearRect(0, 0, canvas1.width, canvas1.height);
var image = new Image();
image.src = 'http://www.pngall.com/wp-content/uploads/2016/06/Earth-Free-Download-PNG.png';
beginPath();
drawImage(image, left1, 0, 200, 200);
closePath();
fill();
left1++;
// requestAnimationFrame(render1);
}
};
I were looking for a drawImage() alternative for fabric.js lib, so I've made a function:
function drawImage(img,sx,sy,swidth,sheight,x,y,width,height) {
return new fabric.Image(img, {
left: x,
top: y,
width: width,
height: height,
id: "rhino",
clipTo: function (ctx) {
ctx.rect(sx,sy,swidth,sheight);
}
});
}
var imgElement = new Image();
imgElement.onload = function() {
var imgInstance = drawImage(imgElement, 33, 71, 104, 124, 21, 20, 87, 104);
canvas.add(imgInstance);
};
imgElement.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg";
The result needs to be:
But I don't get nothing with my custom function. Where is the problem?
Codepen: http://codepen.io/anon/pen/RaxRqZ
I do not really know what you want to achieve, but using clipTo is not my advice, both for performance and complexity reasons.
Draw on a temp canvas the portion of image you need, then use this temp canvas a source for your fabricJS image.
var canvas = new fabric.Canvas('c');
function drawImage(img,sx,sy,swidth,sheight,x,y,width,height) {
var tmpc = document.createElement('canvas');
tmpc.width = swidth;
tmpc.height = sheight;
ctx = tmpc.getContext("2d");
ctx.drawImage(img,-sx,-sy);
return new fabric.Image(tmpc, {
left: x,
top: y,
width: width,
height: height,
id: "rhino"
});
}
var imgElement = new Image();
imgElement.onload = function() {
var imgInstance = drawImage(imgElement, 33, 71, 104, 124, 21, 20, 87, 104);
canvas.add(imgInstance);
};
imgElement.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg";
<script src="http://www.deltalink.it/andreab/fabric/fabric.js"></script>
<canvas id="c" width="500", height="500"></canvas>
Here you can find solution,
var canvas = ctx = '';
canvas = new fabric.Canvas('canvas');
canvas.selection = false;
ctx = canvas.getContext('2d');
function drawImage(imgPath, x, y, width, height)
{
fabric.Image.fromURL(imgPath, function(img) {
img.set({
left: x,
top: y,
width: width,
height: height,
id: "rhino",
clipTo: function (ctx) {
ctx.rect(5,5,50,50);
}
});
canvas.add(img).renderAll().setActiveObject(img);
});
}
var imgElement = new Image();
imgElement.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg";
imgElement.onload = function() {
drawImage(imgElement.src, 50, 50, 100, 100);
}
https://codepen.io/mullainathan/pen/wGpzvY
This is a simple code to animate a line of text in a canvas but when I use clearRect it still remains on the canvas and doesn't get erased.
Here is the WebApp:
<title>Error Clearing FillText</title>
<script type="text/javascript">
var c, ctx, episode;
var map01 = "Overgrown...", map02 = "Flood Zone...";
function load() {
c = document.getElementById("canvas");
ctx = c.getContext("2d");
episode = document.getElementById("episode");
ctx.clearRect(0, 0, 400, 240);
ctx.drawImage(episode, 10, 5);
ctx.font = "20px san-serif";
ctx.fillStyle = "white";
}
var nameCharCount1 = 0, nameCharCount2 = 0;
function funcMap01() {
ctx.clearRect(0, 0, 400, 240);
ctx.drawImage(episode, 10, 5);
setInterval('loadMap01()', 70);
}
function funcMap02() {
ctx.clearRect(0, 0, 400, 240);
ctx.drawImage(episode, 10, 5);
setInterval('loadMap02()', 70);
}
function loadMap01() {
nameCharCount1++;
var text = map01.substring(0, nameCharCount1);
ctx.setFillStyle = "0";
ctx.fillText(text, 16, 25);
}
function loadMap02() {
nameCharCount2++;
var text = map02.substring(0, nameCharCount2);
ctx.setFillStyle = "0";
ctx.fillText(text, 16, 25);
}
addEventListener("load", load, false);
</script>
</head>
<body>
<canvas id="canvas" width="400" height="240" style="border: 1px solid #000000;">
</canvas>
<br>
<button onclick="funcMap01();">Overgrown...</button>
<button onclick="funcMap02();">Flood Zone...</button>
<h1>I hate arrays..</h1>
</body>
<img id="episode" src="http://i717.photobucket.com/albums/ww176/T3ZTAM3NT/Episode_zps4fa66a1b.png" style="display: none;">
JSFIDDLE.
Do you have any tips/ideas on how should I go about clearing the text?
I made a fiddle for it so check this out:
Working Fiddle
And below is the edited code. All I did is cleared the first functions interval in the second functions call and viceversa.
Script
var c, ctx, episode;
var map01 = "Overgrown...", map02 = "Flood Zone...";
var interval1,interval2;
function load() {
c = document.getElementById("canvas");
ctx = c.getContext("2d");
episode = document.getElementById("episode");
ctx.clearRect(0, 0, 400, 240);
ctx.drawImage(episode, 10, 5);
ctx.font = "20px san-serif";
ctx.fillStyle = "white";
}
var nameCharCount1 = 0, nameCharCount2 = 0;
function funcMap01() {
clearInterval(interval2);
ctx.clearRect(0, 0, 400, 240);
ctx.drawImage(episode, 10, 5);
interval1=setInterval('loadMap01()', 70);
}
function funcMap02() {
clearInterval(interval1);
ctx.clearRect(0, 0, 400, 240);
ctx.drawImage(episode, 10, 5);
interval2=setInterval('loadMap02()', 70);
}
function loadMap01() {
nameCharCount1++;
var text = map01.substring(0, nameCharCount1);
ctx.setFillStyle = "0";
ctx.fillText(text, 16, 25);
}
function loadMap02() {
nameCharCount2++;
var text = map02.substring(0, nameCharCount2);
ctx.setFillStyle = "0";
ctx.fillText(text, 16, 25);
}
addEventListener("load", load, false);