I am trying to convert my textarea text into canvas image. that text needs to be displayed in canvas as an image. But sometimes my text is perfectly showing in canvas but the sentences are breaking into words and switching to the next lines. Line breaks are occuring due to which sentences are in improper format. I want to display the text in my textarea and in my canvas in a wrap format. In my below code i am not getting any output . Please advise with best.
<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
<form id="myForm">
Text: <input id="myText" placeholder="your text"/>
<br />
<input type="submit" value="submit" />
</form>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function()
{
context.drawImage(imageObj, 0, 0);
}
imageObj.src = "https://image.freepik.com/free-vector/abstract-background-in-geometric-style_1013-
17.jpg";
var myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(e)
{
var text = document.getElementById('myText').value;
if(text.length == 0)
{
alert("you forgot to put something");
}
else
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var maxWidth = 400;
var lineHeight = 25;
var x = (canvas.width - maxWidth) / 2;
var y = 60;
var text = document.getElementById("myText").value;
context.font = "16pt Calibri";
context.fillStyle = "#333";
context.fillText(text, 50, 50);
wrapText(context, text, x, y, maxWidth, lineHeight);
e.preventDefault();}
});
</script>
</body>
You can use html2canvas for this purpose.
Related
So I am trying to build a Meme-Creator. You already can upload the pics as the background-img from the canvas. Now I am trying to do the Meme font but it isnt really working. However it is creating a big gap in the picture. Thanks for your help and attention! :D
var canvas = document.getElementById("meme-canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
function readImage() {
if (this.files && this.files[0]) {
var FR = new FileReader();
FR.onload = function(e) {
var img = new Image();
img.addEventListener("load", function() {
ctx.clearRect(0, 0, width, height);
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
});
img.src = e.target.result;
};
FR.readAsDataURL(this.files[0]);
}
}
function Text() {
ctx.clearRect(0, 0, width, height);
var textT = document.getElementById("top-text").value;
var textB = document.getElementById("bottom-text").value;
ctx.font = "60px Impact";
ctx.lineWidth = 3;
ctx.strokeText(textT, 10, 65);
ctx.strokeText(textB, 10, 400);
}
document.getElementById("image-input").addEventListener("change", readImage, false);
<input type="file" id="image-input" accept="image/*">
<input type="text" id="top-text" oninput="Text()">
<input type="text" id="bottom-text" oninput="Text()">
<canvas style="position: absolute; width: 400px; top: 100px; left: 10px;" id="meme-canvas"></canvas>
I've made a few changes to your script. because you need to draw the image several times I've written a function that draws the image. The canvas is cleared every time one of the 2 text input changes it's value, and every time you have to redraw everything.
Also textT and textB can be declared only once. You don't need to declare them in the Text function.
I need to use the font size (60) more than once, so I've made a variable fontSize = 60
Since you don't know the size of your canvas ( depends on the size of the uploaded image ) you need to calculate the position for the bottom text textB = height - fontSize/2 where height is the height of the canvas: height = canvas.height = img.height;
I hope it's useful.
var canvas = document.getElementById("meme-canvas");
var ctx = canvas.getContext("2d");
var width = (canvas.width = 400);
var height = (canvas.height = 400);
var fontSize = 60;
var img = new Image();
var textT = document.getElementById("top-text");
var textB = document.getElementById("bottom-text");
function readImage() {
if (this.files && this.files[0]) {
var FR = new FileReader();
FR.onload = function(e) {
img.addEventListener("load", function() {
width = canvas.width = img.width;
height = canvas.height = img.height;
drawImage();
});
img.src = e.target.result;
};
FR.readAsDataURL(this.files[0]);
}
}
function drawImage() {
ctx.drawImage(img, 0, 0);
}
function Text() {
ctx.font = fontSize + "px Impact";
ctx.textAlign = "center";
ctx.lineWidth = 3;
ctx.clearRect(0, 0, width, height);
drawImage();
ctx.strokeText(textT.value, width / 2, 65);
ctx.strokeText(textB.value, width / 2, height - fontSize/2);
}
document
.getElementById("image-input")
.addEventListener("change", readImage, false);
textT.addEventListener("input", Text);
textB.addEventListener("input", Text);
canvas{position: absolute; left: 10px; top:60px;border:1px solid #d9d9d9;}
<input type="file" id="image-input" accept="image/*">
<input type="text" id="top-text" />
<input type="text" id="bottom-text" />
<canvas style="" id="meme-canvas"></canvas>
A few of the issues I encountered:
If you change the size of the canvas you should not use the variables, because those wont be correct, or you will need to keep track of them
If you do clearRect you have to be aware what are you clearing and re-draw it.
The font did not look too clear so I added a white shadow for better contrast
The bottom text needed to be relative to the canvas height
Here is the code:
var canvas = document.getElementById("meme-canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
function readImage() {
if (this.files && this.files[0]) {
var FR = new FileReader();
FR.onload = function(e) {
img.addEventListener("load", function() {
canvas.width = img.width;
canvas.height = img.height;
draw();
});
img.src = e.target.result;
};
FR.readAsDataURL(this.files[0]);
}
}
function draw() {
var textT = document.getElementById("top-text").value;
var textB = document.getElementById("bottom-text").value;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = "60px Impact";
ctx.shadowColor = "white"
ctx.shadowOffsetX = ctx.shadowOffsetY = 2
ctx.lineWidth = 3;
if (img) ctx.drawImage(img, 0, 0);
ctx.strokeText(textT, 10, 45);
ctx.strokeText(textB, 10, canvas.height -10);
}
document.getElementById("image-input")
.addEventListener("change", readImage, false);
<input type="file" id="image-input" accept="image/*"><br>
<input type="text" id="top-text" placeholder="Top text" oninput="draw()"><br>
<input type="text" id="bottom-text" placeholder="Bottom text" oninput="draw()"><br>
<canvas id="meme-canvas"></canvas>
I wrote the following code in my text editor:
<!DOCTYPE HTML><html>
<head>
<script>
window.onload = function()
{
var canvas = document.getElementById("canvasArea");
var context = canvas.getContext("2d");
var ball = new Image();
var smallImage = "https://i.warosu.org/data/sci/img/0076/83/1448614341262.png";
var ballXPos = 75;
var ballYPos = 15;
var ballWidth = 90;
var ballHeight = 90;
var reflectAdj = 3.5;
var reflectAlpha = .4;
var reflect Y = (2*ballYPos) + (2*(ballHeight-reflectAdj));
var gradLV = context.createLinearGradient(0, 0, 0, canvas.height);
ball.onload = function()
{
gradLV.addColorStop( 0, "lightskyblue");
gradLV.addColorStop(.3, "orange");
gradLV.addColorStop(1, "blue");
context.fillStyle = gradLV;
context.fillRect(0, 0, canvs.width, canvas.height);
context.translate(0, reflectY);
context.scale(1,-1);
context.globalAlpha = reflectAlpha;
context.drawImage(ball, ballXpos, ballYpos, ballWidth, ballHeight);
}
}
</script>
</head>
<body>
<div style = "width:400px; height:210px; margin:0 auto; padding:5px;">
<canvas id = "canvasArea" width = "400" height = "210"
style = "border:2px solid black">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
In this code, the canvas is supposed to show a mirrored object, but the canvas is completely blank. Can someone please tell me what I did wrong/ PLease and thank you.
Your code was full of a number of small errors, most of which were typos. You were also failing to specify the image URL as the src of the new Image() constructor.
The code below fixes these issues and provides visual output on the canvas. I'm not sure exactly what mirror effect you're going for, but hopefully this sets you on the right path.
window.onload = function() {
var canvas = document.getElementById("canvasArea");
var context = canvas.getContext("2d");
var ball = new Image();
ball.src = "https://i.warosu.org/data/sci/img/0076/83/1448614341262.png";
var ballXPos = 75;
var ballYPos = 15;
var ballWidth = 90;
var ballHeight = 90;
var reflectAdj = 3.5;
var reflectAlpha = .4;
var reflectY = (2*ballYPos) + (2*(ballHeight-reflectAdj));
var gradLV = context.createLinearGradient(0, 0, 0, canvas.height);
ball.onload = function() {
gradLV.addColorStop( 0, "lightskyblue");
gradLV.addColorStop(.3, "orange");
gradLV.addColorStop(1, "blue");
context.fillStyle = gradLV;
context.fillRect(0, 0, canvas.width, canvas.height);
context.translate(0, reflectY);
context.scale(1,-1);
context.globalAlpha = reflectAlpha;
context.drawImage(ball, ballXPos, ballYPos, ballWidth, ballHeight);
}
}
<div style = "width:400px; height:210px; margin:0 auto; padding:5px;">
<canvas id = "canvasArea" width = "400" height = "210" style = "border:2px solid black">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
</div>
I want to write text on mug.And change property like font-style, color, size by Javascript, Html5. Right now i am using Javascript, Html5.
I want to write text on this mug image and also want to change font color, font-size, font style and rotate text.
I seen this link but i am not satisfied.
How can I write text on a HTML5 canvas element?
I can't give you original code. I have a sample code for this page.
HTML CODE:
<body>
<canvas id="canvas"></canvas>
</body>
JAVASCRIPT CODE:
$(function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var productImg = new Image();
productImg.onload = function () {
var iw = productImg.width;
var ih = productImg.height;
console.log("height");
canvas.width = iw;
canvas.height = ih;
ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height,
0, 0, iw, ih);
//start();
// outline
ctx.beginPath();
ctx.moveTo(88, 235.734375);
ctx.bezierCurveTo(88, 234.734375, 204, 298, 327, 234.734375);
ctx.stroke();
};
productImg.src = "https://d2z4fd79oscvvx.cloudfront.net/0018872_inspirational_teacher_mug.jpeg";
var img = new Image();
img.onload = start;
img.src = "http://blog.foreigners.cz/wp-content/uploads/2015/05/Make-new-friends.jpg";
var pointer = 0;
function start() {
var iw = img.width;
var ih = img.height;
var xOffset = 125,
yOffset = 122;
var a = 122.0;
var b = 30.0;
var scaleFactor = iw / (2*a);
// draw vertical slices
for (var X = 0; X < iw; X+=1) {
var y = b/a * Math.sqrt(a*a - (X-a)*(X-a)); // ellipsis equation
ctx.drawImage(img, X * scaleFactor, 0, 6, ih, X + xOffset, y + yOffset, 1, ih - 605 + y/2);
}
}
});
I am only using Javascript, Html5. I have seen this link http://varunpes.net46.net/Fancy_Product_Designer_V3.0.7/example/cust-txt.jsp
But this plugin have use in Php. I don't want this functionality in Php.
Anybody have any idea please share with me. If Any body have different idea than also share with me.
Write custom text in canvas with fabric js library.
var canvas = new fabric.Canvas('canvas');
$('#font').change(function(){
var obj = canvas.getActiveObject();
if(obj){
obj.setFontFamily($(this).val());
}
canvas.renderAll();
});
function addText() {
var oText = new fabric.IText('Tap and Type', {
left: 100,
top: 100 ,
});
canvas.add(oText);
canvas.setActiveObject(oText);
$('#fill, #font').trigger('change');
oText.bringToFront();
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<div class="container">
<div class="row">
<div class="col s12">
<button class="btn" onclick="addText()">Add Custom Text</button>
<select class="browser-default" id="font">
<option>arial</option>
<option>tahoma</option>
<option>times new roman</option>
</select>
<br />
<canvas id="canvas" width="750" height="550" style="border:1px solid #333"></canvas>
</div>
</div>
</div>
I want to center "My TEXT!" no matter the length of the string... As the length of the text gets longer, the x coordinate needs to get less.
How can I get the x length of a string?
<html>
<head>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
context.font = "12pt Arial";
context.fillText("My TEXT!", 20, 20);
};
imageObj.src = "http://images.google.com/intl/en_ALL/images/srpr/logo11w.png";
};
</script>
</head>
<body>
<canvas width="282px" height="177px" id="myCanvas"></canvas>
</body>
</html>
Simply add this to your code:
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
context.font = "12pt Arial";
/// set text alignment to center
context.textAlign = 'center';
/// draw from center
context.fillText("My TEXT!", canvas.width * 0.5, 20);
};
If you need to get the x coordinate itself you'd need to calculate it based on the width of the text (after the font is set):
var width = context.measureText(myText).width;
var x = (canvas.width - width) * 0.5;
Try setting the text alignment.
context.textAlign = "center";
context.fillText("My LONGGGGG TEXT!", (canvas.width)/2, 20);
This should be what you are looking for. http://www.html5canvastutorials.com/tutorials/html5-canvas-text-align/
There's a textAlign property on canvas that you can set to "center". Then start the fill text in the exact middle of the canvas.
EDIT - Here's a fiddle http://jsfiddle.net/mlienau/2MnnC/
I'd like to be able to let my users select a specific polygonal (6-8 vertices with curved lines between points) area of an image they upload - how do I go about doing this using HTML5 & JS? The only library I found allows purely rectangular selection: http://odyniec.net/projects/imgareaselect/
There's already a library that does part of what you need: polyclip.js, by Zoltan Dulac You can build a UI that allows the user to select points, then feed the data to the library and you're done.
EDIT: Here is a jsFiddle demonstration. Click to select points on the original image and press the Generate button to generate a cropped version.
HTML:
<div id="mainContent">
<div id="canvasDiv">
<br/>
<button id="generate" type="button">Generate
</button>
</div>
<h1>Result:</h1>
<div class="clipParent" style="float:left;">
</div>
</div>
JS:
var canvasDiv = document.getElementById('canvasDiv');
canvas = document.createElement('canvas');
canvas.setAttribute('width', 500);
canvas.setAttribute('height', 500);
canvas.setAttribute('id', 'canvas');
$(canvasDiv).prepend(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
$(canvas).attr({width : this.width, height: this.height});
context.drawImage(imageObj,0,0);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw(){
canvas.width = canvas.width; // Clears the canvas
context.drawImage(imageObj,0,0);
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 5;
for(var i=0; i < clickX.length; i++)
{
context.beginPath();
context.arc(clickX[i], clickY[i], 3, 0, 2 * Math.PI, false);
context.fillStyle = '#ffffff';
context.fill();
context.lineWidth = 5;
context.stroke();
}
}
$('#canvas').click(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
$('#generate').click(function(){
$(".clipParent").empty();
$(".clipParent").prepend('<img src="http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg" id="genimg" />');
var arr = [];
for(var i=0; i < clickX.length; i++){
arr.push(clickX[i]);
arr.push(clickY[i]);
}
$("#genimg")[0].setAttribute("data-polyclip",arr.join(", "));
clickX=[];
clickY=[];
redraw();
polyClip.init();
});
You could load the image on to a canvas tag and then you can do all the drawing you like on that canvas.