HTML5 get base64 code of image created in canvas - html

var ctx;
function roundedImage() {
var img = new Image();
img.onload = function() {
ctx.beginPath();
ctx.arc(160, 150, 75, 0, Math.PI * 2, true); //draw the circle
ctx.lineWidth = 5;
ctx.strokeStyle = 'white';
ctx.stroke();
ctx.clip();
ctx.closePath();
ctx.drawImage(img, 80, 70, 160, 160);
};
img.src = "xxxxx";
img.crossOrigin = "Anonymous";
}
function fillText(name) {
ctx.fillStyle = 'white';
ctx.font = '40pt Calibri';
ctx.fillText(name, 100, 100);
}
function backImg() {
var background = new Image();
background.src = "xxxxx";
background.onload = function(){
ctx.drawImage(background, 3, 3, canvas.width - 7, canvas.height - 7);
roundedImage()
}
}
function createCanvas(width, height) {
var canvas = document.createElement("canvas");
canvas.id = "canvas";
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
}
function admire() {
createCanvas(400,625)
backImg()
var original64 = canvas.toDataURL
console.log(original64);
}
window.onload = admire();
Everything is working fine but I am unable to get the base64 code. I am getting this in console "ƒ toDataURL() { [native code] }" How can I get base64 of canvas created.
And I want to show that base64 image in another canvas. How can I do that?

Related

On canvas context rotate, any drawing made on canvas is getting drawn on the default canvas context?

const ctx = canvas.getContext("2d")
var image = new Image();
image.src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg"
image.onload = function() {
var maxsize = image.width;
var w = maxsize;
var ratio = (image.width / w);//1
var h = (image.height / ratio);
canvas.width = w;
canvas.height = h;
ctx.canvas.width = image.width;
ctx.canvas.height = image.height;
//c.width = image.width;
//c.height = image.height;
ctx.translate(w, h);
ctx.rotate(Math.PI);
ctx.drawImage(image,0,0,w,h);
ctx.save();
ctx.fillRect(0, 0, 150, 100);
}
<canvas id="canvas"></canvas>
On canvas rotate function below, any context ctx drawing, it is being drawn on the default image orientation the cooridnates (0,0) on bottom right. How to fill rect on the rotated image (0,0)instead?
It works for me. I just commented out
//c.width = image.width;
//c.height = image.height;
because I don't know what is c.
By the way: you have useless code in that function.
const ctx = canvas.getContext("2d")
var image = new Image();
image.src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg"
image.onload = function() {
var maxsize = image.width;
var w = maxsize;
var ratio = (image.width / w);//1
var h = (image.height / ratio);
canvas.width = w;
canvas.height = h;
ctx.canvas.width = image.width;
ctx.canvas.height = image.height;
//c.width = image.width;
//c.height = image.height;
ctx.save();
ctx.translate(w, h);
ctx.rotate(Math.PI);
ctx.drawImage(image,0,0,w,h);
ctx.restore();
ctx.fillRect(0, 0, 150, 100);
}
canvas{border:1px solid}
<canvas id="canvas"></canvas>
To reset the current transformation matrix of your context, you can use the setTransform method, with an identity matrix (1, 0, 0, 1, 0, 0)
const ctx = canvas.getContext("2d")
var image = new Image();
image.src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg"
image.onload = function() {
var maxsize = image.width;
var w = maxsize;
var ratio = (image.width / w); //1
var h = (image.height / ratio);
canvas.width = w;
canvas.height = h;
ctx.translate(w, h);
ctx.rotate(Math.PI);
ctx.drawImage(image, 0, 0, w, h);
// reset the transform matrix
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.fillRect(0, 0, 150, 100);
}
<canvas id="canvas"></canvas>

Move image smoothly on an HTML5 canvas

I am moving an inserted image within a Canvas.
HTML
<div id="left">move left</div>
jQuery:
let MoveLeft=0;
$("#left").on("click", function(){
MoveLeft+=10;
});
In the canvas function
function(){
.....
var LeftPos=100; //default
If(MoveLeft!=0)
LeftPos=LeftPos + MoveLeft;
}
ctx.drawImage(img,0,0,imgW,imgH,LeftPos,0,imgW,imgH);
This works, but the movement takes place in a single jump. How do I translate the image smoothly? Like an animation?
let GlassesUp = 0;
$('.MoveGlasses').on("click", function(event) {
if ($(this).hasClass("MoveGlassesUp")) {
GlassesUp += 10;
}
drawMe();
});
var canvas = document.getElementById('cv');
ctx = canvas.getContext('2d');
// core drawing function
var drawMe = function() {
var ImgGlasses = document.getElementById('glasses');
canvas.width = 400;
canvas.height = 400;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, canvas.width, canvas.height);
var GUp = 50;
if (GlassesUp != 0) {
GUp = GUp - GlassesUp;
//alert(GUp)
}
ctx.drawImage(ImgGlasses, 0, 0, 250, 250, 50, GUp, 250, 250);
}
drawMe();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="MoveGlasses MoveGlassesUp">Up</div>
<canvas id="cv"></canvas>
<img src="https://image.flaticon.com/icons/svg/126/126514.svg" style="height:60px;width:100px;opacity:0" id="glasses" />
The draw function displaces the image by 0.7 per 100ms. You can adjust these two parameters.
let GlassesUp = 0;
var t;
$('.MoveGlassesUp').on("click", function(event) {
clearInterval(t)
t = setInterval(function() {
GlassesUp += 0.7;
drawMe();
}, 100);
setTimeout("clearInterval(t)", 1000)
});
$('.MoveGlassesDown').on("click", function(event) {
clearInterval(t)
t = setInterval(function() {
GlassesUp -= 0.7;
drawMe();
}, 100);
setTimeout("clearInterval(t)", 1000)
});
var canvas = document.getElementById('cv');
ctx = canvas.getContext('2d');
// core drawing function
var drawMe = function() {
var ImgGlasses = document.getElementById('glasses');
canvas.width = 400;
canvas.height = 400;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, canvas.width, canvas.height);
var GUp = 50;
if (GlassesUp != 0) {
GUp = GUp - GlassesUp;
//alert(GUp)
}
ctx.drawImage(ImgGlasses, 0, 0, 250, 250, 50, GUp, 250, 250);
}
drawMe();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button class="MoveGlasses MoveGlassesUp">up</button>
<button class="MoveGlasses MoveGlassesDown">down</button>
<hr/>
<canvas id="cv"></canvas>
<img src="https://image.flaticon.com/icons/svg/126/126514.svg" style="height:60px;width:100px;opacity:0" id="glasses" />

how to free draw a straight line in html 5 canvas and get the coordinates of the line?

How to draw a line in html 5 canvas?
I achived to draw an rectangle but how to draw a straight line. Here is my code.
function redraw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (!path.length)
return;
ctx.beginPath();
ctx.moveTo.apply(ctx, path[0]);
for (var i = 1,
len = path.length; i < len; ++i)
ctx.lineTo.apply(ctx, path[i]);
ctx.strokeStyle = '#000';
ctx.stroke();
var start = new Date;
var bounds = contextBoundingBox(ctx);
ms.value = ms.value * 1 + Math.round(((new Date) - start - ms.value) / 4);
ctx.strokeStyle = '#c00';
ctx.strokeRect(bounds.x, bounds.y, bounds.w, bounds.h);
}
This above code is for drawing the rectangle, please modify the code to draw a straight line.
DEMO
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
//add event listner to canvas
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mousemove', mouseMove, false);
canvas.addEventListener('mouseup', mouseUp, false);
var mouseDown = false;
var points = [];
var lines = [];
var linePoint = [];
var stPoint;
var endPoint;
var imageObj = new Image();
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
function Point(x, y) {
this.x = x;
this.y = y;
}
function lineP(stPoint, endPoint) {
this.stPoint = stPoint;
this.endPoint = endPoint;
}
function mouseDown(e) {
mouseDown = true;
stPoint = new Point(e.layerX, e.layerY); //get start point for line
}
function mouseMove(e) {
if (!mouseDown) return;
ctx.clearRect(0, 0, canvas.width, canvas.height); //clear canvas
ctx.drawImage(imageObj, 0, 0, canvas.width, canvas.height); //redraw image
drawLines(); //draw previous lines
ctx.beginPath();
ctx.moveTo(stPoint.x, stPoint.y);
ctx.lineTo(e.layerX, e.layerY);
ctx.stroke();
ctx.closePath();
}
function mouseUp(e) {
mouseDown = false;
endPoint = new Point(e.layerX, e.layerY); //get end point
linePoint.push(new lineP(stPoint, endPoint)); //store line points for next draw
console.log(linePoint);
}
//draw all lines from stored point
function drawLines() {
linePoint.forEach(function(item) {
ctx.beginPath();
ctx.moveTo(item['stPoint'].x, item['stPoint'].y);
ctx.lineTo(item['endPoint'].x, item['endPoint'].y);
ctx.stroke();
ctx.closePath();
})
}
canvas {
border: 1px solid #999;
}
<canvas id="canvas" width="300" height="300"></canvas>
On mouse down store start value of line and on mouse up store end point of line. (event.layerX,event.layerY) will give the point cordinate.

Canvas element as overlay to canvas

TL;DR How to make canvas element with images to be overlay of second canvas with image.
I have two canvas elements. First one has image of t-shirt. Second one has images which can be added manually. I want to make second one to be overlay of first canvas.
js:
var canvas = document.getElementById('first');
var context = canvas.getContext('2d');
context.fillStyle = '#fff';
context.fillRect(0, 0, canvas.width, canvas.height);
var image = new Image();
image.src = 'http://neilhem.github.io/dressfor/images/raw-00.png';
image.onload = function() {
context.save();
context.drawImage(image, 0, 0, canvas.width, canvas.height);
drawCustomLogo(context);
}
function drawCustomLogo(context) {
var layerCanvas = document.getElementById('second');
var layerContext = layerCanvas.getContext('2d');
var image = new Image();
image.src = 'http://neilhem.github.io/dressfor/images/forest/pattern.png';
image.onload = function() {
context.save();
context.drawImage(image, 0, 0, 265, 265);
}
context.globalCompositeOperation = 'overlay';
context.drawImage(layerCanvas, 100, 70);
}
I did some example in http://codepen.io/neilhem/pen/JdGZKx
As you can see overlayed image is lighter, how to make result not so light?
What you want is the source-atop type from the globalCompositeOperation property.
Also, in your code, you never use your second canvas so I removed it
var canvas = document.getElementById('first');
var context = canvas.getContext('2d');
context.fillStyle = 'rgba(0,0,0,0)';
context.fillRect(0, 0, canvas.width, canvas.height);
var image = new Image();
image.src = 'http://neilhem.github.io/dressfor/images/raw-00.png';
image.onload = function() {
context.drawImage(image, 0, 0, canvas.width, canvas.height);
drawCustomLogo(context);
}
function drawCustomLogo(context) {
var image = new Image();
image.src = 'http://neilhem.github.io/dressfor/images/forest/pattern.png';
image.onload = function() {
context.save();
context.globalCompositeOperation = "source-atop";
context.drawImage(this, 0, 0);
}
}
body {
background-color: #000;
}
<canvas id="first" width="547" height="646"></canvas>
Ps : you may also want to change
context.fillStyle = '#FFF'; to context.fillStyle = 'rgba(0,0,0,0)';

html5 tooltip object?

I found this tutorial on html5canvastutorials.com:
var triangle = new Kinetic.Shape(function(){
var context = this.getContext();
context.beginPath();
context.lineWidth = 4;
context.strokeStyle = "black";
context.fillStyle = "#00D2FF";
context.moveTo(120, 50);
context.lineTo(250, 80);
context.lineTo(150, 170);
context.closePath();
context.fill();
context.stroke();
});
triangle.addEventListener("mousemove", function(){
var mousePos = stage.getMousePos();
tooltip.x = mousePos.x;
tooltip.y = mousePos.y;
tooltip.text = "Cyan Triangle";
tooltip.draw();
});
The tooltip object is used without being previously defined. Does HTML 5 canvas have a predefined tooltip object? Or am i missing something here?
You missed this part of the code:
var tooltip = new Kinetic.Shape(function(){
var context = this.getContext();
context.beginPath();
context.fillStyle = "black";
context.fillRect(5, 5, 200, 30);
context.font = "12pt Calibri";
context.fillStyle = "white";
context.textBaseline = "top";
context.fillText(tooltip.text, 10, 10);
}, {
x: 5,
y: 5,
width: 200,
height: 30
});