I'm using the canvas fillrect function to draw a number of rectangles. I'm hardcoding the coordinates at the moment, but is it possible to pass these to fill rect like a function call to the function? For example if I have 10 sets of coordinates, can I do that using a for loop or something and passing it to fillRect?
<body>
<canvas id="canvas1" width="1224" height="770" position="absolute" style="border:1px solid #d3d3d3;">
<script>
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(330,0,150,75);
ctx.fillStyle = "#FF4500";
ctx.fillRect(30,80,150,75);
</script>
Yeah it is easy something like this:
<body>
<canvas id="canvas1" width="1224" height="770" position="absolute" style="border:1px solid #d3d3d3;">
<script>
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
function Generate(color,x,y,w,h)
{
ctx.fillStyle = color;
ctx.fillRect(x,y,w,h)
};
for(i=0;i<10;i++){
var height=100*i;
var width=50*i;
var x=i+(i*100);
var y=i+(i*120);
Generate("red",x,y,width,height);
}
</script>
</canvas>
</body>
Related
I tried canvas but can't find if there is any way to get all data, there is only single pixel information.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #3f3939;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 100);
function copy() {
var imgData = ctx.getImageData(10, 10, 50, 50);
ctx.putImageData(imgData, 20, 20);
}
</script>
<button onclick="copy()">Copy</button>
</body>
</html>
I'm working on image Decryption/Encryption methods, but first I want to get all image data at once, please anyone help.
Extending on my comment...
I'm not sure what you mean by "get all image data at once" the getImageData can return as much or little as you need, and it certainly is at once, we don't need to make multiple calls, we just change the parameters.
read more:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData
If you need the entire canvas you can do:
ctx.getImageData(0, 0, c.width, c.height)
var output = document.getElementById("output");
var ctx_output = output.getContext("2d");
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 80, 80);
ctx.fillRect(99, 20, 20, 20);
function copy() {
var imgData = ctx.getImageData(0, 0, c.width, c.height);
ctx_output.putImageData(imgData, 0, 0);
}
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #3f3939;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br>
<button onclick="copy()">Copy</button>
<br>
<canvas id="output" width="200" height="100" style="border:1px solid #0000ff;">
Your browser does not support the HTML5 canvas tag.</canvas>
I am trying to add a circle over the image and I am using the .onload function too but the circle is still being drawn below the image.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="1024" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var background = new Image();
background.src = "https://i.imgur.com/ua7gL3M.png";
// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function(){
ctx.drawImage(background,0,0);
}
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(512,200,60,0,2*Math.PI);
ctx.strokeStyle = "red"
ctx.lineWidth = 5;
ctx.stroke();
</script>
</body>
</html>
When I run the code snippet, there's a brief moment the circle is visible before the image is rendered. The image has to wait to load before it is rendered, but the circle is being drawn immediately. Because of that, the circle is drawn first then the image is placed on top of it. To fix this, you can draw the circle after the image is rendered. See this revised code snippet:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="1024" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var background = new Image();
background.src = "https://i.imgur.com/ua7gL3M.png";
// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function(){
ctx.drawImage(background,0,0);
// The following lines were moved into the onload callback
ctx.beginPath();
ctx.arc(512,200,60,0,2*Math.PI);
ctx.strokeStyle = "red"
ctx.lineWidth = 5;
ctx.stroke();
}
var ctx = canvas.getContext("2d");
</script>
</body>
</html>
I would like to clone canvas with fabric js and continue editing existing fabric js object in the clone canvas but it is not working. It shows that setBackgroundImage is undefined.
$('#btnClick').on('click touchstart', function () {
var canvas = document.getElementsByTagName("canvas");
// canvas context
var context = canvas[0].getContext("2d");
// get the current ImageData for the canvas
var data = context.getImageData(0, 0, canvas[0].width, canvas[0].height);
// store the current globalCompositeOperation
var compositeOperation = context.globalCompositeOperation;
// set to draw behind current content
context.globalCompositeOperation = "destination-over";
//set background color
context.fillStyle = "#FFFFFF";
// draw background/rectangle on entire canvas
context.fillRect(0,0,canvas[0].width,canvas[0].height);
var tempCanvas = document.createElement("canvas"),
tCtx = tempCanvas.getContext("2d");
tempCanvas.width = 640;
tempCanvas.height = 480;
tempCanvas.setBackgroundImage('');
}
<canvas><canvas>
The idea of using the fabric library is to use its methods to simplify your work. You will not interact with canvas element directly.
The canvas loadFromJSON and toJSON method is what you can use to clone a copy of your canvas including the backgroundimage.
var canvas = new fabric.Canvas('canvas');
var canvas2 = new fabric.Canvas('canvas2');
$(document).ready(function() {
var rect = new fabric.Rect({width: 100, height:200, fill: 'red'});
canvas.add(rect);
var circle = new fabric.Circle({radius: 80, fill: 'blue'});
canvas.add(circle);
$('#clone').click(
function(){canvas2.loadFromJSON(JSON.stringify(canvas), function(){canvas2.renderAll()}); })
});
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;">
</canvas>
<input id="clone" type="button" value="clone canvas">
<canvas id='canvas2' width="500" height="400" style="border:#000 1px solid;">
</canvas>
Hey Im experimenting with some html5 animation and so far I have a square that "falls" whenever I press the button. I was wondering how i could have it go back to the top when it hits the bottom and fall again.
My current code is:
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="200" height="400" style="border:1px solid black;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
function draw (x,y){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.save();
var side = 10
var up = 10
ctx.clearRect(0,0,200,400);
ctx.fillStyle = "#FF0000";
ctx.fillRect(x,y,up,side);
ctx.restore();
y += 5;
var loopTimer = setTimeout('draw('+x+','+y+')',30);
}
</script>
<button onclick="draw(0,0)">draw</button>
</body>
</html>
Using your variables y, you can simply check if it is below the height of the canvas height.
if( y > c.height ){ // use the canvas height, not the context height
y = 0;
}
Also, the way you're currently calling the timer is a bit inefficient. Instead of :
var loopTimer = setTimeout('draw('+x+','+y+')',30);
I would recommend
var loopTimer = setTimeout(function(){ draw(x,y); },30);
Here's a working example: http://jsfiddle.net/vwcdpLvv/
I want to join multiple canvases to make a single image.
So is there any method to covert more than one canvases to toDataURL to make a single image?
create a function that takes multiple arguments (canvas elements), puts them on one blank canvas, then returns the dataurl for the newly made canvas.
var getImadeData = function () {
var i = arguments.length,
tempCanvas = document.createElement("canvas"),
ctx = tempCanvas.getContext("2d");
while (i--) {
ctx.drawImage(arguments[i], 0, 0);
};
return tempCanvas.toDataURL();
};
Now just feed the function multiple canvas elements you want to put into one dataurl like so.
var newData = getImageData(canvas1, canvas2, canvas3);
In this example, the last canvas is placed on the blank canvas first so make sure to order your canvas elements appropriately.
Yes, the drawImage method on the canvas 2d rendering context accepts canvas elements as image elements. So all you have to do is:
Create a new canvas
Get its context
Draw all other canvases to it with drawImage
Extract the final image from this new canvas
try this example hope it will help see here
//html block
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
</canvas>
<canvas id="myCanvas1" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<canvas id="Canvasimage" width="500" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<img id="finalimage" width="500" height="100" style="border:1px solid #c3c3c3;"/>
//script block
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for (var src in sources) {
numImages++;
}
for (var src in sources) {
images[src] = new Image();
images[src].onload = function () {
if (++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
window.onload = function (images) {
//Canvas first here
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 200, 100);
//Canvas second here
var c1 = document.getElementById("myCanvas1");
var ctx1 = c1.getContext("2d");
ctx1.fillStyle = "#00FF00";
ctx1.fillRect(0, 0, 200, 100);
//Canvas final here.
var canvas = document.getElementById("Canvasimage");
var context = canvas.getContext("2d");
var sources = {
darthVader: c.toDataURL("image/png"),
yoda: c1.toDataURL("image/png")
};
loadImages(sources, function (images) {
context.drawImage(images.darthVader, 100, 30, 200, 137);
context.drawImage(images.yoda, 350, 55, 93, 104);
//finalimage here which has two canvas data
var finalimage = document.getElementById("finalimage");
finalimage.src = canvas.toDataURL("image/png");
});
};