I try to copy a certain part of a canvas, then write the copied part in an image. Here is my (wrong) approach:
var c = document.getElementById('MyCanvas'),
ctx = c.getContext('2d');
var ImageData = ctx.getImageData( 25, 25, 150, 150 );
var MyImage = new Image();
MyImage.src = ImageData ; // <-- This is wrong, but I mean something like this
Do you know how can I do it?
Thank you in advance.
ps: I don't want to copy the whole canvas, but a certain part of it.
You could accomplish that in the following way ...
var c = document.getElementById('MyCanvas');
var ctx = c.getContext('2d');
// draw rectangle
ctx.fillRect(0, 0, 200, 200);
ctx.fillStyle = '#07C';
ctx.fillRect(25, 25, 150, 150);
// get image data
var ImageData = ctx.getImageData(25, 25, 150, 150);
// create image element
var MyImage = new Image();
MyImage.src = getImageURL(ImageData, 150, 150);
// append image element to body
document.body.appendChild(MyImage);
function getImageURL(imgData, width, height) {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
ctx.putImageData(imgData, 0, 0);
return canvas.toDataURL(); //image URL
}
<canvas id="MyCanvas" width="200" height="200"></canvas>
apology for not giving explanation
Ok let's give that proposal.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id='crop'>Crop Canvas</button>
<hr/>
<canvas id='myCanvas'></canvas>
<hr/>
<script>
(function() {
var can = document.getElementById('myCanvas');
var w = can.width = 400;
var h = can.height = 200;
var ctx = can.getContext('2d');
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
var btn = document.getElementById('crop');
btn.addEventListener('click', function() {
var croppedCan = crop(can, {x: 0, y: 0}, {x: 80, y: 100});
// Create an image for the new canvas.
var image = new Image();
image.src = croppedCan.toDataURL();
// Put the image where you need to.
document.getElementsByTagName('body')[0].appendChild(image);
return image;
});
})();
function crop(can, a, b) {
var ctx = can.getContext('2d');
var imageData = ctx.getImageData(a.x, a.y, b.x, b.y);
var newCan = document.createElement('canvas');
newCan.width = b.x - a.x;
newCan.height = b.y - a.y;
var newCtx = newCan.getContext('2d');
newCtx.putImageData(imageData, 0, 0);
return newCan;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id='crop'>Crop Canvas</button>
<hr/>
<canvas id='myCanvas'></canvas>
<hr/>
<script>
(function() {
var can = document.getElementById('myCanvas');
var w = can.width = 400;
var h = can.height = 200;
var ctx = can.getContext('2d');
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
var btn = document.getElementById('crop');
btn.addEventListener('click', function() {
var croppedCan = crop(can, {x: 0, y: 0}, {x: 80, y: 100});
// Create an image for the new canvas.
var image = new Image();
image.src = croppedCan.toDataURL();
// Put the image where you need to.
document.getElementsByTagName('body')[0].appendChild(image);
return image;
});
})();
function crop(can, a, b) {
var ctx = can.getContext('2d');
var imageData = ctx.getImageData(a.x, a.y, b.x, b.y);
var newCan = document.createElement('canvas');
newCan.width = b.x - a.x;
newCan.height = b.y - a.y;
var newCtx = newCan.getContext('2d');
newCtx.putImageData(imageData, 0, 0);
return newCan;
}
</script>
</body>
</html>
Related
Currently, I am making a game and in need of making the image rotate toward the cursor. I am using node but the image is in a js tag in the HTML file that uses ctx to draw the image.
If I put a ctx.rotate(angle); pretty much anywhere it will rotate everything; player, map, etc. I need help so that only the player is rotated
this is a simplified version of my code:
<canvas id="ctx" width="200" height="200"></canvas>
<script>
//game
var ctx = document.getElementById("ctx").getContext("2d");
var WIDTH = 200;
var HEIGHT = 200;
var Img = {};
//player
Img.player = new Image();
Img.player.src = '/client/img/player.png';
var Player = function(/*node*/){
ctx.drawImage(Img.player, ...);
}
//map
Img.map = new Image();
Img.map.src = '/client/img/map.png';
//display everything
setInterval(function(){
ctx.clearRect(0,0,200,200);
drawMap();
for(var i in Player.list)
Player.list[i].draw();
},1000/60);
//functions
//move map so that player is always in the middle
var drawMap= function(){
var x = WIDTH/2 - Player.list[/*node*/].x;
var y = HEIGHT/2 - Player.list[/*node*/].y;
ctx.drawImage(Img.map,x,y);
}
</script>
Here's an example of what you may be looking for
const ctx = document.getElementById("ctx").getContext("2d");
const WIDTH = 500,
HEIGHT = 500;
document.getElementById("ctx").height = HEIGHT;
document.getElementById("ctx").width = WIDTH;
var Player = {
x: 50,
y: 55,
angle: 0
}
document.addEventListener("mousemove", (event) => {
var x = event.clientX - Player.x,
y = event.clientY- Player.y,
angle = Math.atan2(y,x);
Player.angle = angle
})
function draw() {
window.requestAnimationFrame(draw);
ctx.clearRect(0, 0, WIDTH, HEIGHT);
ctx.save();
ctx.translate(Player.x, Player.y);
ctx.rotate(Player.angle);
ctx.translate(-Player.x, -Player.y);
ctx.fillRect(Player.x, Player.y, 20, 20);
ctx.restore();
ctx.fillRect(150, 50, 20, 20);
}
draw();
<canvas id="ctx"></canvas>
jsfiddle here
Hope this helps!
I'm trying to create a canvas where I have an image as a background that repeats horizontally and adapts the height automatically.
I've managed to repeat the background image following the x-axis but I'm unable to make the height responsive.
This is my code so far:
const cvs = document.getElementById("canvas");
const ctx = cvs.getContext("2d");
const bg = new Image();
bg.src = "http://lorempixel.com/100/100";
const draw = () => {
const ptrn = ctx.createPattern(bg, "repeat-x");
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, canvas.width, canvas.height);
requestAnimationFrame(draw);
};
draw();
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<canvas id="canvas" width="1000" height="200"></canvas>
<script src="index.js"></script>
</body>
</html>
TLDR: I would like to be able to have an image within my canvas that repeats horizontally and its height is responsive.
Thanks in advance.
Hopefully the explanation in the comments answers your question. Feel free to ask for clarification.
const cvs = document.getElementById("canvas");
const ctx = cvs.getContext("2d");
// First stretch the canvas so we can get
// the full size of teh browser window
cvs.style.height = '100vh';
cvs.style.width = '100vw';
// Now adjust actual canvas size to match
const {width, height} = cvs.getBoundingClientRect();
cvs.height = height;
cvs.width = width;
const bg = new Image();
// Should always wait for onload
// before drawing to prevent race condition.
bg.onload = ()=>{
var x=0;
while(x < cvs.width){
ctx.drawImage(bg, x, 0, 100, cvs.height);
x += bg.width;
}
// draw the image a bunch of times
// var x=0, y=0;
// while(x < cvs.width && y < cvs.height){
// ctx.drawImage(bg, x, y);
// x += bg.width;
// if(x > cvs.width){
// x = 0;
// y += bg.height;
// }
// }
};
bg.src = "http://lorempixel.com/100/100";
<canvas id="canvas"></canvas>
<script src="index.js"></script>
If I got it right you want to fill the height and repeat horizontally, is that correct?
const cvs = document.getElementById("canvas");
const ctx = cvs.getContext("2d");
var bg = new Image();
bg.src = "http://lorempixel.com/100/100";
var tempCanvas = document.createElement("canvas"),
tCtx = tempCanvas.getContext("2d");
var imgWidth = 200;
var imgHeight = 200;
const draw = () => {
tempCanvas.width = imgWidth;
tempCanvas.height = imgHeight;
tCtx.drawImage(bg, 0, 0, 100, 100, 0, 0, imgWidth, imgHeight);
const ptrn = ctx.createPattern(tempCanvas , "repeat-x");
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, canvas.width, canvas.height);
requestAnimationFrame(draw);
};
bg.onload = () => {
draw();
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<canvas id="canvas" width="1000" height="200"></canvas>
<script src="index.js"></script>
</body>
</html>
try setting up the image size to match the canvas size just like that:
bg.src = "http://lorempixel.com/200/200";
Cheers! :)
I am new here, so please be consider.
I've created a new canvas and created a rects in the canvas , when I set a background to the canvas I have a terrible problem that The background is on the shapes
Here is the code:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var BB = canvas.getBoundingClientRect();
var offsetX = BB.left;
var offsetY = BB.top;
var WIDTH = canvas.width;
var HEIGHT = canvas.height;
var background = new Image();
background.src = "url_to_image";
// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function(){
ctx.drawImage(background,0,0);
}
<canvas id="canvas" width=450 height=700></canvas>
Thanks
Edit:
I found in my code a function of fillStyle that change my background,
so I delete it and instead of this I put this:
var w = canvas.width;
var h = canvas.height
var img = new Image();
img.src = "http://www.girija.info/wp-content/uploads/2015/08/Paznja-Sabranost-450x700.png";
img.onload = function () {
var pattern = ctx.createPattern(img, "repeat");
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, w, h);
};
//ctx.fillStyle = "#FAF7F8";
rect(0, 0, WIDTH, HEIGHT);
// redraw each rect in the rects[] array
for (var i = 0; i < rects.length; i++) {
var r = rects[i];
ctx.fillStyle = 'red';
rect(r.x, r.y, r.width, r.height);
}
But every drag of the rect (the rects loaded from stack and can be draggable) the background color of the rect change
You can set the background using the css property
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var BB = canvas.getBoundingClientRect();
var offsetX = BB.left;
var offsetY = BB.top;
var WIDTH = canvas.width;
var HEIGHT = canvas.height;
ctx.rect(10, 10, 100, 100);
ctx.fill();
canvas.style.backgroundImage = 'url(https://picsum.photos/450/700)';
<canvas id="canvas" width=450 height=700></canvas>
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
background_image();
function background_image()
{
background_image = new Image();
background_image.src = 'https://image.ibb.co/kmV8kz/photodune_2359510_smiles_l_22.png';
background_image.onload = function(){
context.drawImage(background_image, 0, 0);
}
}
<canvas id="canvas" width=450 height=700></canvas>
I have HTML canvas and it work fine to display image.
And I have this jquery code to download the image :
$(".img-download").click(function(){
var data = canvas.toDataURL();
download.href = data; -- I tried this to download image, but PNG file generated cannot be opened in photoshop or any other image manipulation apps
alert (data); -- then, I tried to see what's actually the data content
});
And here's my download button :
Download
Here's what the data content :
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjAAAAH0CAYAAAAjYBdQAAAgAElEQVR4XrS9d7Cm6Vnm93Sf0DlMTp0naZSFTCokYNf2er2mbBZvFcG4WGxClQtThVibUpk/EFCLjQoEJmgUkECkrRImLMqiKEmIIIE0EsrSaKIm9/R0DqfP6fb1u677ft9vpJGE7Nqv58w53/e97xPu5w7XHZ7n3fSrv/rblzdt2jzys2lsbKyPy5suD16X9WvT2DyWNm8em/WT1yW+GZs36a/Ll/QXf2/yvZcv5T7uujT9vVnt6WL9LC/pzkvr4+LauXHu7Olx/vxpt7Okpi9d2lB/G2lf/V9W5xuXLo3N+vKy2qNNfjbWL42lpSX/MED6vKzrGIcG6b8Z3yY1TBvctbx5eawzL413WR/Q58rW1bFtxw5dR/uZg+9byn28mPP6+rr/XmIcG/pedPLXvp5xp2/aps/QSWPf2DDdGLPpwk2Mx9MwYUMzN3bZ7fC+vpjm6zXQ55sZtNYia+JWTR/ebFZ7lzZ0v77XSrh9+qflzZtFJ415aWnZffV85vWk+9Dssm7lms36Y/OmpbFrx65x1dXXjOUtq15r+twsuq+vb4wTJ06MCxcujJ07d+hn59gmerImyysr7tN9aU039MPvZfXP2OAvj19jUqPVt9ZoZXXs3rt3bN22bZw4eXI8dfwpX3uJ8XC9aE9/58+fdz9bt24ND7it8FfIDIHCrxsaM/0v+f2SyJI1oM26JRRjLPpv06ZL4r5L4pWN0JzPWWOuh59MUfGxaAOx6MNcU/wCDTOerNNl+vXa5Tro7DH4ojG2bN0ydu/eM5aXV8fpM2fGGf2wjh4jvK8+t4r220STVdOXdjMG5Gvt4vo4d+68aRL+GKKZZoBcqK8lfdY0siyUjCIjfG5R0Yu/aZY2uWZTyb/li2GXPDJmzyuz6elOffsjLhDZ6L9pQbtLy8s1ttzWNDFP0b75V...E/7UDlTn0Y32rlx6914e6lETEZT1eAzDETH/jXAkYXU6L02ljLT72oBMzZVe7rg7CQBwrfnc1/nY0jzZK4FSwx0JSUHuNZzCgpeWQM8PvjVQ3EmNJnEVc6XUBQBYZljS4L4bGWwfa9FAX4ESvPBYLV9B9DwCNVwfSbj0JBIXldRwJPCbZP+Q0XuF9+/5JFH5uzuCPpaaNAr3jxtXSZKFePJTB7rqUh984qb2e2cmY8Hqtt405NBQausnxkk5WvLVHIWjGCguBrwppNrRdcAUkBx0wJEdKlGYTrYRLjkv7gyQZMS4B6muiX++XZZfo21TiRg07PgnPf8O2Ph3gbACRXbJulEtssfjPx0ReNQfjqEob7/fjCweuHg+W5Amf6odvVEXcR4LZN9gqI5CLgmlDubH9nh7FD+tBk4m7JPp1NKUhtSwL8bqCE4MSgJFH7TJ9kfHxqo4GxQ972gI8vdrAvZE4M3+TIa+zpsx9a5qpKlyItM48fwNX6EVSWyGfma4KMIAgu7gbetqG/r4+aNCsS2CQfO7n/CAiWCj835hIfxYyxWN7hq2mr/8ZOOU8WUwxBaEwCPs6vULvn3wkPJDtZBHKpzcOJnFucre2uuHdqaTydPnSvonGs/g0r4OKZXCZuEFidHNk6Y4famEkKDG7BM8fnjcc1UCssWqhwu/CbngZL+OWmBj+/RB2MYTuWXJAcAV0Yz/Kpq8Jqbf3a9hx/HccTt+bYpwFxrp8SrP4mNlgiJE6JtvCdgW+j0c+Hj4zVbNp35SJxMQLO8ZX8pAqRlu6MP+IDLnjfxdlzwU72sEQgG1upWFXA+NlJKuo7b/TGFRtmOEx4nOVDr5jsf4KUNwEnFlihKP/ik+Z4x6PyhI0Cj8pMLlrokRrxi3yh33yjjI/h7lOwjZdqK+cWV8x2fydGz2SwfGVoOUk9X4kbMuan1e6buvh3DB8e0+99vhj89usv/w+6eIb7ytBeBgAAAABJRU5ErkJggg==
why it generate PNG file successfully, but why it can't be opened? why the PNG file is corrupt?
UPDATE : here's my complete jquery script
$(".pepe-thumbnail").click(function(){
var pepe_src = $(this).attr("src");
$("#canvasimg").attr("src", pepe_src);
});
var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
var deviceWidth = window.innerWidth;;
canvasWidth = deviceWidth - 40;
canvasHeight = deviceWidth - 40;
canvas.width = canvasWidth;
canvas.height = canvasHeight;
if (canvas.width > 500 || canvas.height > 500){
canvas.width = 560;
canvas.height = 500;
}
var img = document.getElementById("canvasimg");
//imgx = canvas.width/2 - img.width/2;
//imgy = canvas.height/2 - img.height/2;
imgx = 0;
imgy = 0;
function runLoop(){
ctx.lineWidth = 8;
ctx.font = "26pt Lato";
ctx.strokeStyle = "black";
ctx.fillStyle = "white";
ctx.textAlign = "center";
ctx.lineJoin = "round";
var text1 = document.getElementById("canvastext-top").value;
//text1 = text1.toUpperCase();
var text2 = document.getElementById("canvastext-bottom").value;
//text2 = text2.toUpperCase();
x = canvas.width/2;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, imgx, imgy, canvas.width, canvas.height);
ctx.strokeText(text1, x, 50);
ctx.fillText(text1, x, 50);
ctx.strokeText(text2, x, (canvas.height - 40));
ctx.fillText(text2, x, (canvas.height - 40));
window.setTimeout(runLoop, 14);
};
runLoop();
$(".img-download").click(function(){
var data = canvas.toDataURL();
alert (data);
});
Try this :
$(".img-download").click(function(){
var data = canvas.toDataURL();
$(this).attr("href",data)
$(this).attr("download","imgName.png");
});
Ref:Download canvas image using JS Jquery
var data = canvas.toDataURL();
dataURL = data.replace(/^data:image\/[^;]*/, 'data:application/octet-stream');
dataURL = dataURL.replace(/^data:application\/octet-stream/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=Canvas.png');
var aTag = document.createElement('a');
aTag.download = 'download.png';
aTag.href = dataURL;
aTag.click();
I need help with the following resource http://www.filmfans.cz/test/index2.html
I don't know how to change the colours of the pinquen after the click on the sample.
I would like to do something similar as in the following link http://www.pixelbox.sk/fileadmin/Flash/cosmo_2.swf
Here is my code
$(window).load(function(){
var width = $(window).width();
var height = $(window).height();
var c = document.getElementById("a");
var ctx = c.getContext("2d");
var can2 = document.createElement('canvas');
document.body.appendChild(can2)
can2.width = c.width;
can2.height= c.height;
var ctx2 = can2.getContext("2d");
var test= new Image();
test.src = "tux.png";
test.onload = function() {
ctx2.drawImage(test, 0, 0);
}
var img = new Image();
img.src = "2.png";
img.onload = function(){
ctx2.globalCompositeOperation = "source-in";
var pattern = ctx2.createPattern(img, "repeat");
ctx2.fillStyle=pattern;
ctx2.fillRect(0,0,300,300);
}
});
$(document).ready(function () {
$('.klik').click(function() {
var adresa = $(this).children('img').attr('src');
var canvas = document.getElementById("a");
canvas.width = canvas.width;//blanks the canvas
var c = canvas.getContext("2d");
var img = new Image();
img.src = adresa;
img.onload = function(){
var pattern = c.createPattern(img, "repeat");
//c.globalCompositeOperation = "source-in";
c.fillStyle=pattern;
c.fillRect(0,0,300,300);
}
// c.drawImage(img, 0, 0);
//}
//return false;
});
});
</code>
</pre>
Problem solved !
Using a second, temporary canvas with source-in is the right idea:
ctx2.drawImage(test, 0, 0);
ctx2.globalCompositeOperation = 'source-in';
var ptrn = ctx2.createPattern(pattern,'repeat');
ctx2.fillStyle = ptrn;
ctx2.fillRect(0,0,300,300);
ctx.drawImage(can2,0,0)
live example:
http://jsfiddle.net/UcGrC/