Im starting to learn canvas and i just hit my first frustrating situation, im trying to make a clipping mask of a .jpg src in a triangle. Everything looks fine until i restore my context and try to add any other Path... my clipping mask appears to not exist anymore.
Here is my code :
<script>
function init() {
var canvas = document.getElementById('myCanvas');
if(canvas.getContext) {
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.src = 'stephgopro2.jpg';
// triangle coordonate
context.save();
context.beginPath;
context.moveTo(100, 0);
context.lineTo(0, 100);
context.lineTo(200, 100);
context.lineTo(100, 0);
context.clip();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0, 300, 170);
};
context.restore();
context.beginPath();
context.fillStyle = '#333';
context.rect(0, 0, 600, 200);
context.fill();
}
}
</script>
</head>
<body onload='init()'>
<canvas id="myCanvas" width="600" height="200"></canvas>
</body>
Can you please help me with that? many thanks.
The image is loaded asynchronously so the context has already been restored before the image is drawn to the canvas. If you update the code as follows you'll get (what I think are) the results you expect:
function init() {
var canvas = document.getElementById('myCanvas');
if(canvas.getContext) {
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.src = 'assets/1.jpg';
// triangle coordonate
context.save();
context.beginPath();
context.moveTo(100, 0);
context.lineTo(0, 100);
context.lineTo(200, 100);
context.lineTo(100, 0);
context.stroke();
context.clip();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0, 300, 170);
// Restore the context and continue drawing now the image has been drawn
context.restore();
context.beginPath();
context.fillStyle = '#333';
context.rect(0, 0, 600, 200);
context.fill();
};
}
}
Related
i am trying to draw a canvas line on div id "myCanvas" but problem is the line becomes very low resolution and its not shows smooth line. How can i increase that line resolution? And make it smooth line?
js:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);
var grd = context.createLinearGradient(100, 150, canvas.width, canvas.height);
grd.addColorStop(0, '#0132bf');
grd.addColorStop(1, '#ccd9ff');
context.fillStyle = grd;
context.fill();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.lineTo(-10, 190);
context.bezierCurveTo(200, -100, 500, 200, 400, 150);
context.lineWidth = .9;
context.strokeStyle = '#ccd9ff';
context.stroke();
jsfiddle link
Try giving your canvas HTML element width and height attributes that fit your requirements, for example:
<canvas id="myCanvas" width="600" height="600">
I am trying to add an image to a canvas object, but for the life of me I cannot figure out how to get it to display properly. It shows the canvas object (a circle), but not the image.
Here is my canvas HTML:
<canvas id="leaf" width="60" height="60" style="border:1px solid #d3d3d3;"></canvas>
Below is the relevant JS:
let canvas = <HTMLCanvasElement>document.getElementById('leaf');
let context = canvas.getContext('2d');
let imageObj = new Image();
imageObj.onload = function()
{
context.save();
context.beginPath();
context.arc(30, 30, 28, 0, 2 * Math.PI);
context.clip();
context.drawImage(imageObj, 0, 0);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
context.restore();
context.beginPath();
context.arc(30, 30, 28, 0, 2 * Math.PI);
context.drawImage(imageObj, 0, 0);
context.strokeStyle = 'red';
context.stroke();
console.log(canvas.toDataURL());
return canvas.toDataURL();
But instead of showing the image within the circle, it just displays the circle, without the image...
I figured out that this was due to the return canvas.toDataURL(); being called preemptively, so I moved it into the image.load() function, and now it displays properly!
I don´t know why the text in canvas is blurry and the image drawed is also blurry, this is my example how I create the canvas with the image and text.
https://jsfiddle.net/jorge182/5ju5pLqb/2/
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.save();
context.beginPath();
context.arc(25, 25, 25, 0, Math.PI * 2, true);
context.closePath();
context.clip();
context.drawImage(imageObj, 0, 0, 50, 50);
context.beginPath();
context.arc(0, 0, 25, 0, Math.PI * 2, true);
context.clip();
context.closePath();
context.restore();
context.lineWidth = 2;
context.textAlign = 'left';
context.font = '8pt Signika Negative';
context.fillStyle = 'black';
context.fillText('Jorge', 60, 15);
context.fillText(' have been here!', 60, 30);
context.font = '6pt Signika Negative';
context.textAling = 'left';
context.fillStyle = '#555';
context.fillText('Caribe Photo Weading Photograpy', 60, 40);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'
The blurry image is probably because you resized the image too much from its original size. Take a look at the jsFiddle below and you can see if you only resize half of its size it's still looking good.
https://jsfiddle.net/gracegotlost/5ju5pLqb/3/
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
imageObj.onload = function() {
var width = imageObj.width;
var height = imageObj.height;
context.save();
context.beginPath();
context.arc(width/2, height/2, 150, 0, Math.PI * 2, true);
context.fill();
context.closePath();
context.clip();
context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);
context.beginPath();
context.arc(0, 0, 25, 0, Math.PI * 2, true);
context.clip();
context.closePath();
context.restore();
context.textAlign = 'left';
context.font = '32pt Signika Negative';
context.fillStyle = 'black';
context.fillText('Jorge', 60, 350);
context.fillText(' have been here!', 150, 350);
context.font = '20pt Signika Negative';
context.textAling = 'left';
context.fillStyle = '#555';
context.fillText('Caribe Photo Weading Photograpy', 60, 400);
};
For the blurry text I found one post very helpful. If you can increase the text size it will look better, but to give it even more higher resolution you would probably do as follows:
https://stackoverflow.com/a/15666143/4809052
For the jagged edge the first answer is very helpful.
I want to set an image instead of painting the ball
My code is the following
ballPainter = {
BALL_FILL_STYLE: 'rgb(255,0,50)',
BALL_STROKE_STYLE: 'rgb()',
paint: function (ball, context) {
var imageObj = new Image();
context.save();
context.shadowColor = undefined;
context.lineWidth = 2;
context.fillStyle = this.BALL_FILL_STYLE;
context.strokeStyle = this.BALL_STROKE_STYLE;
context.beginPath();
context.arc(ball.left, ball.top,
ball.radius, -1, Math.PI*2, false);
context.clip();
context.fill();
context.stroke();
context.restore();
}
},
You might want to check
http://www.w3schools.com/tags/canvas_drawimage.asp
I'm not sure if you can crop an image to a cricle though (maybe if the image has a transparant background)
*edit apperently you can HTML5 Canvas - Fill circle with image
I just wanted to clip image in a curve .. but not happening this..
Only image is showing and but not with clip.
var canvas = document.getElementById('leaf');
var context = canvas.getContext('2d');
/*
* save() allows us to save the canvas context before
* defining the clipping region so that we can return
* to the default state later on
*/
context.save();
context.beginPath();
context.moveTo(188, 150);
context.quadraticCurveTo(288, 0, 388, 150);
context.lineWidth = 10;
context.quadraticCurveTo(288, 288, 188, 150);
context.lineWidth = 10;
context.clip();
context.beginPath();
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 10, 50);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
/* context.beginPath();
context.arc(x - offset, y - offset, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'yello';
context.fill();
*/
/*
* restore() restores the canvas context to its original state
* before we defined the clipping region
*/
context.restore();
context.beginPath();
context.moveTo(188, 150);
context.quadraticCurveTo(288, 0, 388, 150);
context.lineWidth = 10;
context.quadraticCurveTo(288, 288, 188, 150);
context.lineWidth = 10;
context.strokeStyle = 'blue';
context.stroke();
<canvas id="leaf" width="500" height="500" style='left: 0;
position: absolute; top: 0;'></canvas>
You have to move everything from the line context.save(); to context.clip(); inside the function object of your imgObj's onload handler:
imageObj.onload = function()
{
context.save();
context.beginPath();
context.moveTo(188, 150);
context.quadraticCurveTo(288, 0, 388, 150);
context.lineWidth = 10;
context.quadraticCurveTo(288, 288, 188, 150);
context.lineWidth = 10;
context.clip();
context.drawImage(imageObj, 10, 50);
};
See http://jsfiddle.net/CSkP6/1/ for an example.
When, a few time after your script is launched, your image gets loaded, you have no more a clipped Canvas since you restore it afterwise.
You need to do a drawClipped function, and call it in your onload function for instance :
function drawClipped(context, myImage) = {
context.save();
context.beginPath();
context.moveTo(188, 150);
context.quadraticCurveTo(288, 0, 388, 150);
context.lineWidth = 10;
context.quadraticCurveTo(288, 288, 188, 150);
context.lineWidth = 10;
context.clip();
context.drawImage(myImage, 10, 50);
context.restore();
};
var imageObj = new Image();
imageObj.onload = function() {
drawClipped(context, imageObj);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';