I want to draw an image on canvas using JS.
This is my html code:
<canvas style="width:1000px;height:600px;border:1px solid black;" id="canvas"> </canvas>
This is my js code:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function(){
ctx.drawImage(img, 0, 0,1000,600)
}
img.src = someUrlToJpgImage;
This is the origin jpg image (1000x600) which is located on server:
This is the result (1000x600) I see in browser:
As you see this is scaled the top left corner of the image but not the whole image as expected. I tried to add to js code:
ctx.imageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
but it didn't help.
How to solve this problem?
You should set the amount of pixels desired on the canvas element:
<canvas style="width:1000px;height:600px;border:1px solid black;" height="600" width="1000" id="canvas"> </canvas>
Related
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 am trying to draw an image on a canvas, in HTML5. For some reason, the image simply isn't drawn onto the canvas, and there are no errors in the console. Here is my code:
<!DOCTYPE html>
<html>
<body>
<img id="image" src="Images/player.png"></img>
<canvas id="canvas" width="1000" height="750"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = document.getElementById("image");
context.fillStyle = "lightblue";
context.fillRect(0, 0, 1000, 750);
context.drawImage(image, 0, 0);
</script>
</body>
</html>
Can somebody help? Thanks.
You need to add an event listener to the img tag called load. Then in the callback you can call drawImage with the provided img element.
You can do something like this - I have added one stackoverflow image for representation:
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const image = document.getElementById("image");
context.fillStyle = "lightblue";
context.fillRect(0, 0, 1000, 750);
image.addEventListener('load', e => context.drawImage(image, 0, 0));
<img id="image" src="https://stackoverflow.blog/wp-content/themes/stackoverflow-oct-19/images2/header-podcast.svg" height="100px"></img>
<canvas id="canvas" width="1000" height="750"></canvas>
From the documentation: Drawing an image to the canvas
I hope this helps!
I have an image which is loaded from server and contains 4 bands in RGB format. Because of the alpha band which causes the image to look transparently, then I need to crop this alpha band and save it as JPEG format. One way I can think is using canvas, however, I'm not sure it possible or not as the test I did show that the image is the same.
<p>Image to use:</p>
<img id="scream" src="data/with_alpha.png" alt="The Scream">
<p>Canvas:</p>
<canvas id="myCanvas" width="2400" height="2097" style="border:1px solid #d3d3d3;">
</canvas>
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.globalAlpha = 1;
var img = document.getElementById("scream");
ctx.drawImage(img, 0, 0);
// This ones does not do anything to remove the alpha band
c.toDataURL("image/jpeg", 0.0);
}
I found the answer from http://sunbox.github.io/image-to-canvas-to-image/ it can be like this to convert canvas to image:
// Get the image
var sampleImage = document.getElementById("ringoImage"),
canvas = convertImageToCanvas(sampleImage),
image = convertCanvasToImage(canvas);
// Actions
document.getElementById("pngHolder").appendChild(image);
// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/jpeg");
return image;
}
hi i am trying to draw image with a button in canvas. But i can not draw in the clear canvas. so;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Başlıksız Belge</title>
</head>
<body>
<input type="button" id="b1" value="ciz">
<canvas id="canvas" height="300" width="600" style="border: solid;background-color: brown; " >Eski Sürüm Tarayıcı . </canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var b1 =document.getElementById("b1");
var image = new Image(60, 45); // using optional size for image
var kontrol;
image.src = '/pika.png'; //it is in my pc
image.onload = function(){ // i don't want draw the image on load
kontrol=true;}
b1.onclick=function(){ // i want draw with button
if(kontrol=true){
ctx.drawImage(image, 0, 0);
}
}
</script>
</body>
</html>
when i try with image on load function it is working but i want draw with the button
No problem i get it. thanks...
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var b1 =document.getElementById("b1");
var image = new Image(60, 45);
b1.onclick=function(){
image.src = 'https://i.hizliresim.com/nWdGrR.png';
image.onload = function(){
ctx.drawImage(image, 0, 0);
}
}
If pika.png is located in same directory as your html file then just remove the forward slash before your image's name: image.src = 'pika.png';
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>