I'm trying to do an amimation by rotating an image with the jquery roate plugin.
Unfortunately this plugin doesn't change it's point of rotation it's always centered..
and it doesn't have a parameter for this
I've found that doing this with canvas I can set it with canvas.transform() function.
I'm a begginer on working with canvas, but if somebody can give me an example how to do this I will greatly apreciate it.
here's the image rotate plugin: http://wilq32.adobeair.pl/jQueryRotate/Wilq32.jQueryRotate.html
here's made with canvas..(but kind of bad because it leaves trails.don't know why http://jsbin.com/ipeqi3/2)
This is what I have so far, indeed it rotates the image by changing the point of rotation with translate (not transform, my bad...)
What It DOESN'T do it doesn't create a smooth animation, it's very rough..How can I accomplish that?
Another thing I need is that the background HAS to be transparent
here's my code so far:
<script>
var degree=10;
function docanvas() {
var canvas = document.getElementById('canvas');
var cContext = canvas.getContext('2d');
var img = new Image();
// Create new Image object
img.src = 'http://www.gravatar.com/avatar/e555bd971bc2f4910893cd5b785c30ff?s=128&d=identicon&r=PG'; // Set source path // set img src
var cw = img.width, ch = img.height, cx = 0, cy = 0;
canvas.setAttribute('width', 300);
canvas.setAttribute('height', 300);
cContext.fillStyle = "rgba(0, 0, 255, .5)";
cContext.fillRect(0, 0, 300, 300);
cContext.translate(150, 150);
cContext.rotate(degree * Math.PI / 180);
cContext.drawImage(img, -64, -128,128,128);
degree+=5;
}
</script>
</head>
<body onload="setInterval('docanvas()',50);">
<canvas id="canvas"></canvas>
<script>
docanvas(30);
</script>
</body>
</html>
Related
First of all I've looked through all the similar questions and tried multiple times to get this to work but have had no luck. I'm trying to take a signature that I capture via a canvas element on either a desktop or mobile device and resize it. Because the device sizes are different, so is my canvas for each device. Before I save the signature image, I want to resize it so that all my saved images are the same size.
Here is the code I currently have.
resize(){
var image = new Image();
var t = this;
image.onload = function(){
image.width = '100px';
image.height = 'auto';
t.canvas.width = image.width;
t.canvas.height = image.height;
t.ctx.drawImage(image, 0,0);
console.log(t.canvas.toDataURL());
return t.canvas.toDataURL();
}
image.src = this.canvas.toDataURL("image/png");
}
This code doesn't produce any errors, however after I "resize" the image, canvas.toDataURL(); returns "data:," rather than the image. Before I attempt the resize, I am able to grab a valid png image from this.canvas.toDataURL();.
I also tried changing the style width and height but this causes my canvas to reset which causes my image to disappear.
this.canvas.style.width = 100;
this.canvas.style.height = 100;
Any help would be appreciated.
UPDATE
I've put together a Codepen here that shows the original image on the left and on the right you will see that same image that I have attempted to resize with JavaScript. I added an orange background for readability purposes only.
Codepen
The only problem I could spot in your codepen is this line
context.drawImage(img,200,150);
The values 200 and 150 specify the position on the canvas where the image should be drawn. This essentially draws it ouside the visible area.
If you change it to
context.drawImage(img, 0, 0, img.width, img.height);
it works as the second pair of numbers is the clipping area.
Here's an example:
var canvas = document.getElementById("can");
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
canvas.width = 200;
canvas.height = 150;
img.width = 200;
img.height = 150;
context.drawImage(img, 0, 0, img.width, img.height);
}
img.src = document.getElementById("theImg").src;
canvas {
background: orange;
}
<img id="theImg" src="data:image/png;base64,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">
<canvas id="can"></canvas>
I have this example of a canvas as a div background (I forked it from another example, don't remember where I found it):
http://jsfiddle.net/sevku/6jace59t/18/
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
var divHeight = document.getElementById('canvas').clientHeight;
var divWidth = document.getElementById('canvas').clientWidth;
function assignToDiv(){ // this kind of function you are looking for
dataUrl = canvas.toDataURL();
document.getElementsByTagName('div')[0].style.background='url('+dataUrl+')'
}
function draw() { // replace with your logic
ctx.fillStyle = "rgb(100, 250, 100)";
ctx.fillRect (10, 10, divWidth-20, divHeight-20);
}
draw()
assignToDiv()
My problem; If I put the dimensions of the div 300 x 150, the canvas does what it is supposed to do. But if I change the dimensions, the canvas is supposed to adapt to the div dimensions. What did I do wrong that this doesn't happen?
PS: I'm a beginner, so please forgive me stupid questions.
It's because if you don't give canvas width and height, it's default to 300x150, so after you get the width and height from div, you should use them to set your canvas' dimensions as well.
Another point worth notice is that you use div.style.background property to set the background image, however, as there's many background related properties (e.g: background-repeat in your jsfiddle, background-position, background-size...), the background can set all of them at once.
When you use div.style.background='url('+dataUrl+')';. It overrides all other background-related properties to initial.
If you want to preserve those properties, you may either reset them after you set style.background, or you can use div.style.backgroundImage to change the background image without affect other background related properties.
jsfiddle
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
var divHeight = document.getElementById('canvas').clientHeight;
var divWidth = document.getElementById('canvas').clientWidth;
// VVVV After you get WxH, set the canvas's dimension too.
canvas.width = divWidth;
canvas.height = divWidth;
var div1 = document.getElementById('canvas');
var div2 = document.getElementById('canvas2');
function assignToDiv(div){ // this kind of function you are looking for
var dataUrl = canvas.toDataURL();
div.style.background='url('+dataUrl+')'; // This line will overwrite your background settings.
div.style.backgroundRepeat = 'repeat-x'; // Use this to set background related properties after above.
}
function assignToDivAlt(div){ // this kind of function you are looking for
var dataUrl = canvas.toDataURL();
div.style.backgroundImage = 'url('+dataUrl+')'; // Only set the background-image would have same effect.
}
function draw() { // replace with your logic
ctx.fillStyle = "rgb(100, 250, 100)";
// If you don't set WH, then the canvas would be 300x150, and those
// you drawed but out of boundary are clipped.
ctx.fillRect (10, 10, divWidth-20, divHeight-20);
}
draw()
assignToDiv(div1);
assignToDiv(div2);
canvas {display:none;}
div {
width:600px;
height:550px;
border:1px solid grey;
background-repeat:repeat-x;
}
<canvas></canvas>
<div id="canvas"></div>
<div id="canvas2"></div>
I am trying to draw the following image to a canvas but it appears blurry despite defining the size of the canvas. As you can see below, the image is crisp and clear whereas on the canvas, it is blurry and pixelated.
and here is how it looks (the left one being the original and the right one being the drawn-on canvas and blurry.)
What am I doing wrong?
console.log('Hello world')
var c = document.getElementById('canvas')
var ctx = c.getContext('2d')
var playerImg = new Image()
// http://i.imgur.com/ruZv0dl.png sees a CLEAR, CRISP image
playerImg.src = 'http://i.imgur.com/ruZv0dl.png'
playerImg.width = 32
playerImg.height = 32
playerImg.onload = function() {
ctx.drawImage(playerImg, 0, 0, 32, 32);
};
#canvas {
background: #ABABAB;
position: relative;
height: 352px;
width: 512px;
z-index: 1;
}
<canvas id="canvas" height="352" width="521"></canvas>
The reason this is happening is because of Anti Aliasing.
Simply set the imageSmoothingEnabled to false like so
context.imageSmoothingEnabled = false;
Here is a jsFiddle verson
jsFiddle : https://jsfiddle.net/mt8sk9cb/
var c = document.getElementById('canvas')
var ctx = c.getContext('2d')
var playerImg = new Image()
// http://i.imgur.com/ruZv0dl.png sees a CLEAR, CRISP image
playerImg.src = 'http://i.imgur.com/ruZv0dl.png'
playerImg.onload = function() {
ctx.imageSmoothingEnabled = false;
ctx.drawImage(playerImg, 0, 0, 256, 256);
};
Your problem is that your css constraints of canvas{width:512}vs the canvas property width=521will make your browser resample the whole canvas.
To avoid it, remove those css declarations.
var c = document.getElementById('canvas')
var ctx = c.getContext('2d')
var playerImg = new Image()
// http://i.imgur.com/ruZv0dl.png sees a CLEAR, CRISP image
playerImg.src = 'http://i.imgur.com/ruZv0dl.png'
playerImg.width = 32
playerImg.height = 32
playerImg.onload = function() {
ctx.drawImage(playerImg, 0, 0, 32, 32);
};
#canvas {
background: #ABABAB;
position: relative;
z-index: 1;
}
<canvas id="canvas" height="352" width="521"></canvas>
Also, if you were resampling the image (from 32x32 to some other size), #canvas' solution would have been the way to go.
As I encountered this older post for some of my issues, here's even more additional insight to blurry images to layer atop the 'imageSmoothingEnabled' solution.
This is more specifically for the use case of monitor specific rendering and only some people will have encountered this issue if they have been trying to render retina quality graphics into their canvas with disappointing results.
Essentially, high density monitors means your canvas needs to accommodate that extra density of pixels. If you do nothing, your canvas will only render enough pixel information into its context to account for a pixel ratio of 1.
So for many modern monitors who have ratios > 1, you should change your canvas context to account for that extra information but keep your canvas the normal width and height.
To do this you simply set the rendering context width and height to: target width and height * window.devicePixelRatio.
canvas.width = target width * window.devicePixelRatio;
canvas.height = target height * window.devicePixelRatio;
Then you set the style of the canvas to size the canvas in normal dimensions:
canvas.style.width = `${target width}px`;
canvas.style.height = `${target height}px`;
Last you render the image at the maximum context size the image allows. In some cases (such as images rendering svg), you can still get a better image quality by rendering the image at pixelRatio sized dimensions:
ctx.drawImage(
img, 0, 0,
img.width * window.devicePixelRatio,
img.height * window.devicePixelRatio
);
So to show off this phenomenon I made a fiddle. You will NOT see a difference in canvas quality if you are on a pixelRatio monitor close to 1.
https://jsfiddle.net/ufjm50p9/2/
In addition to #canvas answer.
context.imageSmoothingEnabled = false;
Works perfect. But in my case changing size of canvas resetting this property back to true.
window.addEventListener('resize', function(e){
context.imageSmoothingEnabled = false;
}, false)
The following code works for me:
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0, img.width, img.height, 0, 0, img.width, img.height);
};
img.src = e.target.result; // your src
Simple tip: draw with .5 in x and y position. like drawImage(, 0.5, 0.5) :D There you get crisp edges :D
As starting point I have a image on my canvas:
var canvas = $('canvas')[0];
var ctx=canvas.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,0,0,240,297);
Now I would like to add a frame to this Image on the same canvas. For this:
I first replace the image with the Frame.
Next I try to copy the old canvas content inside of this frame
I try to do this like that:
var frame = document.getElementById("frame");
var ctx = $('canvas')[0].getContext("2d");
var dst = ctx.canvas;
ctx.drawImage(frame,0,0, 240, 297);
ctx.drawImage(dst, 40, 40);
But the code is not working because it copies the frame again to the canvas instead of the image: Here you can see a demo: https://jsfiddle.net/35mxfsv0/
What do I wrong? What do I have to change? Thanks
As you just assign the original canvas to dst, when you draw anything on that canvas, the dst will also changed (because they're pointing to same canvas).
So you have to assign a new canvas to dst, and draw the image from origin to dst, then draw the frame on origin, and last, draw dst's image to origin.
window.onload = function() { // Make it safe that window.onload ensures all images loaded.
var canvas = $('canvas')[0];
var ctx=canvas.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,0,0,240,297);
//START OF MY CODE
var frame = document.getElementById("frame");
// Comment out as we demo in same scope, ctx is already have what we want.
//var ctx = $('canvas')[0].getContext("2d");
// Create a new canvas, and draw the image on the origin canvas to it.
var dst = document.createElement('canvas');
dst.width = canvas.width;
dst.height = canvas.height;
var dstCtx = dst.getContext('2d');
dstCtx.drawImage(canvas, 0, 0);
// Above is what you suppose the canvas should do.
//var dst = ctx.canvas;
// Draw frame
ctx.drawImage(frame,0,0, 240, 297);
// As your frame is not an opacity one, you have to copy to specific position.
ctx.drawImage(dst, 0, 0, dst.width, dst.height, 10, 10, 220, 277);
}
img{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
</canvas>
<img src="http://www.w3schools.com/tags/img_the_scream.jpg" id="scream"/>
<img src="http://www.wpclipart.com/page_frames/picture_frames/wood_picture_frame.jpg" id="frame"/>
However, if you still have the access to that scream image, you can just draw frame first, then draw image on it:
var canvas = $('canvas')[0];
var ctx=canvas.getContext("2d");
var img=document.getElementById("scream");
var frame = document.getElementById("frame");
ctx.drawImage(frame,0,0, 240, 297);
// 10, 10 seems to fit the frame.
ctx.drawImage(img, 10, 10);
Please change id of your html and js file.
I have two pngs, one white and the other red.
<img class="rangeHorizontal" id="seek" src="http://i.imgur.com/hRHH9VO.png">
<img id="seekFill" src="http://i.imgur.com/WoJggN0.png">
When the song it not playing it should be white, and when the song is going it should fill red as the song progresses, and also when scrubbed backwards and forwards respectively.
I have been able to muddle through most of the play functionality except the Canvas portion.
Currently the two pngs are overlays on top of each other and when the song plays the whole red png overlays on top, .. instead of just showing a portion,.. its pretty hard to explain but I have a fiddle so things become clearer.
https://jsfiddle.net/tallgirltaadaa/q9qgyob0/
The desired result would like this player, it also uses a two png method:
http://codecanyon.net/item/zoomsounds-neat-html5-audio-player/full_screen_preview/4525354?ref=hkeyjun
If anyone could help me out a bit I would love it.. I have been masking and trying to use canvas all morning with no luck.
There is a bit too much code to go through, but here is one technique use can use to draw a clipped version of an image. Implement as needed -
Live Example
At each timeupdate:
Canvas is cleared
The white bottom image is drawn in (you can scale these as you wish)
Progress is calculated (currentTime / duration)
The red top image is drawn in using the clipping arguments:
ie.
ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
Full example code (had to replace the music due to the API usage) -
var imgBg = new Image(),
imgFg = new Image(),
count = 2;
imgBg.onload = imgFg.onload = init;
imgBg.src = "http://i.imgur.com/hRHH9VO.png";
imgFg.src = "http://i.imgur.com/WoJggN0.png";
function init() {
if (--count) return; // makes sure both images are loaded
var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d"),
audio = document.querySelector("audio");
canvas.width = imgBg.naturalWidth;
canvas.height = imgBg.naturalHeight;
render();
audio.volume = 0.5;
audio.addEventListener("timeupdate", render);
function render() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(imgBg, 0, 0);
// calc progress
var pst = audio.currentTime / audio.duration;
// draw clipped version of top image
if (pst > 0) {
ctx.drawImage(imgFg, 0, 0, (canvas.width * pst)|0, canvas.height, // source
0, 0, (canvas.width * pst)|0, canvas.height); // dst
}
}
}
body {background:#ccc}
canvas {width:600px;height:auto}
<audio src="https://raw.githubusercontent.com/epistemex/free-music-for-test-and-demo/master/music/kf_colibris.mp3" controls></audio>
<canvas></canvas>