Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
canvas
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#center, #left, #right {
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="image" width="300" height="300"></canvas>
<canvas id="center" width="300" height="300"></canvas>
<canvas id="right" width="300" height="300"></canvas>
<canvas id="left" width="300" height="300"></canvas>
<script>
// center ////////////////////////////////////////////////////////////////
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split(' ');
var line = '';
for(var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else {
line = testLine;
}
}
context.fillText(line, x, y);
}
var canvas = document.getElementById('center');
var context = canvas.getContext('2d');
make_base();
function make_base()
{
base_image = new Image();
base_image.src = 'hmm.png';
base_image.onload = function(){
context.drawImage(base_image, 300, 300);
}
}
var maxWidth = 300;
var lineHeight = 25;
var x = canvas.width /2;
var y = 60;
var text = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, debitis, ea. Harum, debitis placeat nisi iusto blanditiis officia quibusdam optio?';
context.font = '16pt Arial';
context.fillStyle = '#333';
context.textAlign='center';
wrapText(context, text, x, y, maxWidth, lineHeight);
// left //////////////////////////////////////////////////////////////////
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split(' ');
var line = '';
for(var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else {
line = testLine;
}
}
context.fillText(line, x, y);
}
var canvas = document.getElementById('left');
var context = canvas.getContext('2d');
var maxWidth = 290;
var lineHeight = 22;
var x = 10;
var y = 60;
var text = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, debitis, ea. Harum, debitis placeat nisi iusto blanditiis officia quibusdam optio?';
context.font = 'italic 14pt Arial';
context.fillStyle = '#333';
context.textAlign='left';
wrapText(context, text, x, y, maxWidth, lineHeight);
//right //////////////////////////////////////////////////////////////////
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split(' ');
var line = '';
for(var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else {
line = testLine;
}
}
context.fillText(line, x, y);
}
var canvas = document.getElementById('right');
var context = canvas.getContext('2d');
var maxWidth = 290;
var lineHeight = 16;
var x = canvas.width;
var y = 60;
var text = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, debitis, ea. Harum, debitis placeat nisi iusto blanditiis officia quibusdam optio?';
context.font = 'italic bold 12pt Arial';
context.fillStyle = '#333';
context.textAlign='right';
wrapText(context, text, x, y, maxWidth, lineHeight);
// img ////////////////////////////////////////////////////////////////
var canvas = document.getElementById('image');
var context = canvas.getContext('2d');
var imageObj = new Image();
var frame = new Image();
var sticker = new Image();
var maxWidth = canvas.width - 40;
var lineHeight = 16;
var x = canvas.width - 20;
var y = 230;
var text = 'I iusto blanditiis officia quibusdam optio?';
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
context.drawImage(frame, 0, 0);
context.drawImage(sticker, 200, 50);
context.font = 'italic bold 12pt Arial';
context.fillStyle = '#fff';
context.textAlign='right';
wrapText(context, text, x, y, maxWidth, lineHeight);
};
imageObj.src = 'hmm.png';
frame.src = 'frame.png';
sticker.src = 'sticker.png';
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
document.getElementById('image').src = dataURL;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.