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>
Related
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.
I'm trying to create a canvas where I have an image as a background that repeats horizontally and adapts the height automatically.
I've managed to repeat the background image following the x-axis but I'm unable to make the height responsive.
This is my code so far:
const cvs = document.getElementById("canvas");
const ctx = cvs.getContext("2d");
const bg = new Image();
bg.src = "http://lorempixel.com/100/100";
const draw = () => {
const ptrn = ctx.createPattern(bg, "repeat-x");
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, canvas.width, canvas.height);
requestAnimationFrame(draw);
};
draw();
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<canvas id="canvas" width="1000" height="200"></canvas>
<script src="index.js"></script>
</body>
</html>
TLDR: I would like to be able to have an image within my canvas that repeats horizontally and its height is responsive.
Thanks in advance.
Hopefully the explanation in the comments answers your question. Feel free to ask for clarification.
const cvs = document.getElementById("canvas");
const ctx = cvs.getContext("2d");
// First stretch the canvas so we can get
// the full size of teh browser window
cvs.style.height = '100vh';
cvs.style.width = '100vw';
// Now adjust actual canvas size to match
const {width, height} = cvs.getBoundingClientRect();
cvs.height = height;
cvs.width = width;
const bg = new Image();
// Should always wait for onload
// before drawing to prevent race condition.
bg.onload = ()=>{
var x=0;
while(x < cvs.width){
ctx.drawImage(bg, x, 0, 100, cvs.height);
x += bg.width;
}
// draw the image a bunch of times
// var x=0, y=0;
// while(x < cvs.width && y < cvs.height){
// ctx.drawImage(bg, x, y);
// x += bg.width;
// if(x > cvs.width){
// x = 0;
// y += bg.height;
// }
// }
};
bg.src = "http://lorempixel.com/100/100";
<canvas id="canvas"></canvas>
<script src="index.js"></script>
If I got it right you want to fill the height and repeat horizontally, is that correct?
const cvs = document.getElementById("canvas");
const ctx = cvs.getContext("2d");
var bg = new Image();
bg.src = "http://lorempixel.com/100/100";
var tempCanvas = document.createElement("canvas"),
tCtx = tempCanvas.getContext("2d");
var imgWidth = 200;
var imgHeight = 200;
const draw = () => {
tempCanvas.width = imgWidth;
tempCanvas.height = imgHeight;
tCtx.drawImage(bg, 0, 0, 100, 100, 0, 0, imgWidth, imgHeight);
const ptrn = ctx.createPattern(tempCanvas , "repeat-x");
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, canvas.width, canvas.height);
requestAnimationFrame(draw);
};
bg.onload = () => {
draw();
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<canvas id="canvas" width="1000" height="200"></canvas>
<script src="index.js"></script>
</body>
</html>
try setting up the image size to match the canvas size just like that:
bg.src = "http://lorempixel.com/200/200";
Cheers! :)
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>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var background = new Image();
var ground = new Image();
var canon_base = new Image();
var gun = new Image();
$(function() {
var angleInDegrees = 0;
var image = document.createElement("img");
image.onload = function() {
context.drawImage(image, canvas.width / 2 - image.width / 2, canvas.height / 2 - image.width / 2);
}
image.src = "images/gun.png";
$("#clockwise").click(function() {
angleInDegrees += 10;
drawRotated(angleInDegrees);
});
$("#counterclockwise").click(function() {
angleInDegrees -= 10;
drawRotated(angleInDegrees);
});
function drawRotated(degrees) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.save();
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(degrees * Math.PI / 180);
context.drawImage(image, -image.width / 2, -image.width / 2);
context.restore();
}
});
background.onload = function() {
context.drawImage(background, 0, 0);
context.drawImage(ground, 0, 565);
context.drawImage(canon_base, 10, 430);
document.body.appendChild(canvas);
};
background.src = 'images/background.png';
ground.src = 'images/ground.png';
canon_base.src = 'images/canon_base.png';
// gun.src='images/gun.png';
<!doctype html>
<head>
<title>HTML5 games workshop: One-screen platformer</title>
<meta charset="utf-8">
<!-- <script src="js/phaser.min.js"></script> -->
<!-- <script src="js/jquery-3.1.1.min"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="900" height="600" style="border:1px solid #000000;"></canvas>
<div id="game">
<button id="clockwise">Rotate right</button>
<button id="counterclockwise">Rotate left</button>
</div>
</body>
I'm trying to make a small game, for that I need to rotate a cannon gun.So I used jquery code in the above.It works well.But the problem is when rotating image and other images and it rotates in white background.How can I Fix this
I want to convert a canvas to a png image and put it on a page. My problem is that if I have an image on my canvas, it does not get converted. This is my HTML:
<html>
<head>
<meta charset='UTF-8'>
<link rel="stylesheet" type="text/css" href="./assets/css/general.css">
<script type="text/javascript" src="./codetests.js"></script>
</head>
<body>
<div class="wrapper" id="wrap1">
<img id="persphoto" src="./images/nouserimage.png" style="display:none;">
<input type="hidden" id="persname" value="Test Testinen">
<input type="hidden" id="adress" value="Testgatan 1">
<input type="hidden" id="postaddr" value="12345 Teststad">
<input type="hidden" id="homephone" value="0123456789">
<input type="hidden" id="cellphone" value="0712345678">
<canvas src="" id="canvasresult" width="296px" height="420px" />
<br>
</div>
<script type="text/javascript"> drawCanvas(); </script>
<script type="text/javascript"> convertCanvasToImage(canvasresult); </script>
</body>
</html>
My JavaScript is the following:
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
//return image;
document.getElementById("wrap1").appendChild(image);
}
function drawCanvas() {
var c = document.getElementById("canvasresult");
h=parseInt(document.getElementById("canvasresult").getAttribute("height"));
w=parseInt(document.getElementById("canvasresult").getAttribute("width"));
//get context
var ctx = c.getContext("2d");
//Fill the path
ctx.fillStyle = "#ffffff";
ctx.fillRect(0,0,w,h);
var img=document.getElementById("persphoto");
ih=parseInt(document.getElementById("persphoto").getAttribute("height"));
iw=parseInt(document.getElementById("persphoto").getAttribute("width"));
var maxw = 150;
var maxh = 150;
if (ih > iw) {
var newh = 150;
var neww = Math.round(150 * (iw / ih));
} else if (ih < iw) {
var newh = Math.round(150 * (ih / iw));
var neww = 150;
} else {
var newh = 150;
var neww = 150;
}
var newx = Math.round((296 - neww) / 2);
var newy = 60 + Math.round((150 - newh) / 2);
img.onload = function() {
ctx.drawImage(img,newx,newy,neww,newh);
};
ctx.fillStyle = "#000000";
ctx.font = '10pt Verdana';
ctx.textAlign = 'center';
ctx.fillText(document.getElementById("persname").value, w/2, h*0.65);
ctx.fillText(document.getElementById("adress").value, w/2, h*0.69);
ctx.fillText(document.getElementById("postaddr").value, w/2, h*0.73);
ctx.fillText(document.getElementById("homephone").value, w/2, h*0.77);
ctx.fillText(document.getElementById("cellphone").value, w/2, h*0.81);
var canvasData = c.toDataURL("image/png");
/*
document.getElementById("canvasdata").value = canvasData;
document.getElementById("hidepersphoto").value = document.getElementById("persphoto").value;
document.getElementById("hidepersname").value = document.getElementById("persname").value;
document.getElementById("hideadress").value = document.getElementById("adress").value;
document.getElementById("hidepostaddr").value = document.getElementById("postaddr").value;
document.getElementById("hidehomephone").value = document.getElementById("homephone").value;
document.getElementById("hidecellphone").value = document.getElementById("cellphone").value;
*/
}
My problem is as I said that when I call convertCanvasToImage any images currently on the canvas doesn't get converted. The result is:
Can anyone spot where the problem is?
Few Changes:
pass the string literal "canvasresult" of canvasId rather than a variable.
<script type="text/javascript"> convertCanvasToImage("canvasresult"); </script>
Get the canvas object based on the Id:
// Converts canvas to an image
function convertCanvasToImage(canvasId) {
var image = new Image();
var canvas=document.getElementById(canvasId);
image.src = canvas.toDataURL("image/png");
//return image;
document.getElementById("wrap1").appendChild(image);
}