HTML5 Canvas Text Wrap Test

Developer
Ash Blue
Size
3,076 Kb
Views
46,552
  1. HTML5 Canvas Text Wrap Test Previews
  2. HTML5 Canvas Text Wrap Test HTML Codes
  3. HTML5 Canvas Text Wrap Test CSS Codes
  4. HTML5 Canvas Text Wrap Test JS Codes

How do I make an html5 canvas text wrap test?

Simple app to help you figure out how text wrap can be implemented in your HTML5 Canvas applications. A base example that can be easily expanded on for your needs. What is a html5 canvas text wrap test? How do you make a html5 canvas text wrap test? This script and codes were developed by Ash Blue on 18 July 2022, Monday.

HTML5 Canvas Text Wrap Test Previews
IQ Test

HTML5 Canvas Text Wrap Test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HTML5 Canvas Text Wrap Test</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { margin: 10px;
}
form label { display: block;
}
form li { margin: 10px 0;
}
input, textarea { padding: 5px; border: 1px solid #ccc; width: 300px;
}
textarea { height: 100px;
}
canvas { border: 1px solid #ccc;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Canvas Text Wrap Test</h1>
<form> <ul> <li> <label for="width">Width (px)</label> <input id="width" type="number" value="200" max="500" required /> </li> <li> <label for="font-size">Font Size (px)</label> <input id="font-size" type="number" value="12" /> </li> <li> </li> <li> <label>Text</label> <textarea id="text" required>Seven hundred twelve counts of extortion. Eight hundred and forty-nine counts of racketeering. Two hundred and forty-six counts of fraud. Eighty-seven counts of conspiracy murder. Five hundred and twenty-seven counts of obstruction of justice. How do the defendants plead?</textarea> </li> <li> <input id="submit" type="submit"> </li> </ul>
</form>
<h2>Result</h2>
<canvas id="canvas" width="500" height="500"></canvas> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

HTML5 Canvas Text Wrap Test - Script Codes CSS Codes

body { margin: 10px;
}
form label { display: block;
}
form li { margin: 10px 0;
}
input, textarea { padding: 5px; border: 1px solid #ccc; width: 300px;
}
textarea { height: 100px;
}
canvas { border: 1px solid #ccc;
}

HTML5 Canvas Text Wrap Test - Script Codes JS Codes

var canvas = $('#canvas');
var ctx = canvas.get(0).getContext('2d');
$('#submit').click(function (e) { e.preventDefault(); var text = $('#text').val(), fontSize = parseInt($('#font-size').val()), width = parseInt($('#width').val()), lines = [], line = '', lineTest = '', words = text.split(' '), currentY = 0; ctx.font = fontSize + 'px Arial'; for (var i = 0, len = words.length; i < len; i++) { lineTest = line + words[i] + ' '; // Check total width of line or last word if (ctx.measureText(lineTest).width > width) { // Calculate the new height currentY = lines.length * fontSize + fontSize; // Record and reset the current line lines.push({ text: line, height: currentY }); line = words[i] + ' '; } else { line = lineTest; } } // Catch last line in-case something is left over if (line.length > 0) { currentY = lines.length * fontSize + fontSize; lines.push({ text: line.trim(), height: currentY }); } // Visually output text ctx.clearRect(0, 0, 500, 500); for (var i = 0, len = lines.length; i < len; i++) { ctx.fillText(lines[i].text, 0, lines[i].height); }
});
HTML5 Canvas Text Wrap Test - Script Codes
HTML5 Canvas Text Wrap Test - Script Codes
Home Page Home
Developer Ash Blue
Username ashblue
Uploaded July 18, 2022
Rating 3
Size 3,076 Kb
Views 46,552
Do you need developer help for HTML5 Canvas Text Wrap Test?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ash Blue (ashblue) Script Codes
Name
HTML5 Editable Table
HTML5 Canvas Progress Bar
CSS Sprite Animation
A Pen by Ash Blue
Loader Example
CSS Arrows
Overflowing Gallery
JavaScript Anagram Algorithm Explanation
Flow Chart Prototype
CSS Zoom Icon
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!