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';
Related
I am trying to implement this post, which draws and animates a stick figure, into Vue.
draw(timestamp, wave) {
if(Date.now() < (timestamp+900)) return requestAnimationFrame(this.draw);
context.clearRect(0, 0, window.innerWidth, window.innerHeight);
context.beginPath();
context.fillStyle = "black"; // #000000
context.arc(200, 50, 30, 0, Math.PI * 2, true);
context.fill(); //fill the circle
context.beginPath();
context.lineWidth = 6;
context.stroke();
//body
context.beginPath();
context.moveTo(200, 80);
context.lineTo(200, 180);
context.strokeStyle = "black";
context.stroke();
//arms
context.beginPath();
context.strokeStyle = "black";
context.moveTo(200, 100);
context.lineTo(150, 130);
if(wave) {
context.moveTo(200, 100);
context.lineTo(250, 130);
wave = false;
}
else {
context.moveTo(200, 100);
context.lineTo(250, 70);
wave = true;
}
context.stroke();
//legs
context.beginPath();
context.strokeStyle = "black";
context.moveTo(200, 180);
context.lineTo(150, 280);
context.moveTo(200, 180);
context.lineTo(250, 280);
context.stroke();
timestamp = Date.now();
requestAnimationFrame(this.draw);
}
},
mounted: function () {
var canvas = document.getElementById("canvas");
context = canvas.getContext("2d"); // get Canvas Context object
let timestamp = Date.now();
let wave = false;
this.draw(timestamp, wave);
}
If I do the entire draw method inside of my mounted method, it works. But when I move draw to it's own method, as shown above, it fails.
I know it's failing because the line if(Date.now() < (timestamp+900)) is always returning false when running the code above. But I'm not sure why that's happening, or what the difference is.
How can I get this canvas to animate?
Here's an example of how this might look in a component.
Vue.component('canvas-demo', {
data: function () {
return {
timestamp: Date.now(),
wave: false
}
},
mounted: function(){
this.startDrawing(this.$el.getContext("2d"));
},
template: '<canvas></canvas>',
methods: {
startDrawing: function(context) {
var draw = () => {
if (Date.now() < (this.timestamp + 900)) return requestAnimationFrame(draw);
context.clearRect(0, 0, window.innerWidth, window.innerHeight);
context.beginPath();
context.fillStyle = "black"; // #000000
context.arc(200, 50, 30, 0, Math.PI * 2, true);
context.fill(); //fill the circle
context.beginPath();
context.lineWidth = 6;
context.stroke();
//body
context.beginPath();
context.moveTo(200, 80);
context.lineTo(200, 180);
context.strokeStyle = "black";
context.stroke();
//arms
context.beginPath();
context.strokeStyle = "black";
context.moveTo(200, 100);
context.lineTo(150, 130);
if (this.wave) {
context.moveTo(200, 100);
context.lineTo(250, 130);
this.wave = false;
}
else {
context.moveTo(200, 100);
context.lineTo(250, 70);
this.wave = true;
}
context.stroke();
//legs
context.beginPath();
context.strokeStyle = "black";
context.moveTo(200, 180);
context.lineTo(150, 280);
context.moveTo(200, 180);
context.lineTo(250, 280);
context.stroke();
this.timestamp = Date.now();
requestAnimationFrame(draw);
}
draw();
}
}
});
new Vue({
el: '#app'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<canvas-demo></canvas-demo>
</div>
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.
How can you fill a shape created in javascript with an image?
I am using a shape I created with javascript and am right now filling it with a color. How can I replace that and fill it with an image/gif of my choice?
function shape(x,y) {
ctx.fillStyle = "#9dd4ff";
ctx.beginPath();
ctx.moveTo(232,213)
ctx.lineTo(315,198);
ctx.lineTo(x,y);
ctx.closePath();
ctx.fill();
}
You can solve this problem by using your path as a MASK
HERE IS THE CODE
// Create an image element
var img = document.createElement('IMG');
// When the image is loaded, draw it
img.onload = function () {
// Save the state, so we can undo the clipping
ctx.save();
// Create a shape, of some sort
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 30);
ctx.lineTo(180, 10);
ctx.lineTo(200, 60);
ctx.arcTo(180, 70, 120, 0, 10);
ctx.lineTo(200, 180);
ctx.lineTo(100, 150);
ctx.lineTo(70, 180);
ctx.lineTo(20, 130);
ctx.lineTo(50, 70);
ctx.closePath();
// Clip to the current path
ctx.clip();
ctx.drawImage(img, 0, 0);
// Undo the clipping
ctx.restore();
}
// Specify the src to load the image
img.src = "https://www.google.com/images/srpr/logo3w.png";
Try this:
var thumbImg = document.createElement('img');
thumbImg.src = 'path_to_image';
function shape(x,y) {
ctx.fillStyle = "#9dd4ff";
ctx.beginPath();
ctx.moveTo(232,213)
ctx.lineTo(315,198);
ctx.lineTo(x,y);
ctx.drawImage(thumbImg, 0, 0, 50, 50);
ctx.closePath();
ctx.fill();
}
-- Edit --
Remove ctx.fillStyle ="#9dd4ff"
As you need to mention the path of image.
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();
};
}
}
I want my rectangle to rotate in place. But currently it is rotating as though there is one object at center and my object is revolving around it i.e much like what we see in solar system. I want my object to rotate in place not revolve around something. How can I do that?
This is my code so far:
<script type="text/javascript">
var context;
var radian = 0.01;
var w, h;
$(document).ready(function () {
w = document.width;
h = document.height;
var canvas = $('#canvas');
context = canvas[0].getContext('2d');
canvas[0].width = w;
canvas[0].height = h;
setInterval(startAnim, 10);
});
function startAnim() {
context.save();
context.strokeStyle = 'rgb(0,0,0)';
context.fillStyle = 'rgb(0,0,0)';
context.fillRect(0, 0, w, h);
context.strokeStyle = 'rgb(0,0,0)';
context.fillStyle = 'rgb(255,255,0)';
context.strokeRect(0, 0, 200, 200);
context.fillRect(0, 0, 200, 200);
context.restore();
context.fillStyle = 'rgb(0,255,255)';
context.fillRect(500, 400, 200, 200);
radian += 0.01;
}
</script>
UPDATE: Sorry I was experimenting before I posted and I forgot to add rotate function while posting here. This is the actual code:
function startAnim() {
context.save();
context.strokeStyle = 'rgb(0,0,0)';
context.fillStyle = 'rgb(0,0,0)';
context.fillRect(0, 0, w, h);
context.translate(350, 300);
context.rotate(radian);
context.translate(-350, -300);
context.strokeStyle = 'rgb(0,0,0)';
context.fillStyle = 'rgb(255,255,0)';
context.strokeRect(0, 0, 200, 200);
context.fillRect(0, 0, 200, 200);
context.restore();
context.fillStyle = 'rgb(0,255,255)';
context.fillRect(500, 400, 200, 200);
radian += 0.01;
}
Use translate(x, y), rotate(r), and then draw your rectangle.
function startAnim() {
context.save();
context.strokeStyle = 'rgb(0,0,0)';
context.fillStyle = 'rgb(0,0,0)';
context.fillRect(0, 0, w, h);
//^Shouldn't clearRect() be better here?
//Draw translated, rotated rectangle at (250, 250)
var x = 250;
var y = 250;
context.save();
context.translate(x, y);
context.rotate(radian);
context.fillStyle = 'rgb(255,255,0)';
context.fillRect(0, 0, 200, 200);
context.restore();
//Restore context (to reverse translation and rotation)
context.strokeStyle = 'rgb(0,0,0)';
context.fillStyle = 'rgb(255,255,0)';
context.strokeRect(0, 0, 200, 200);
context.fillRect(0, 0, 200, 200);
context.restore();
context.fillStyle = 'rgb(0,255,255)';
context.fillRect(500, 400, 200, 200);
radian += 0.01;
}
jsFiddle demo and Simple jsFiddle demo with one rotating rectangle
You have to translate your context to the center of the rectangle before you rotate it:
context.translate(RECT_CENTER_X, RECT_CENTER_Y);
context.rotate(radian);
context.fillRect(-RECT_CENTER_X, -RECT_CENTER_Y, w, h);