JavaScript Image Maker

On 3 minutes, 18 seconds read By Edward

Generate Dynamic Custom images

The Canvas API can be used to draw graphics using JavaScript and the HTML canvas element.

No fallback option will be provided for browsers that do not support the Canvas API.

HTML Canvas Tag

Basic Support
Name Type Year
Chrome Web browser 2010
Opera Web browser 2009
Edge Web browser 2011
Firefox Web browser 2010
Safari Web browser 2009
Websites Recommend if applicable 2024

Glossary:

Element

Defined by a start tag, content and end tag. A void element does not have a closing tag.

Tag

Simple instructions telling a web browser how to format content.

Attributes

Additional values that configure elements or adjust them to meet user criteria.

Height

Intrinsic height of image in pixels.

Width

Intrinsic width of image in pixels.

Canvas Element:

<canvas width="150" height="150"></canvas>
<picture>
	<source class="avif" srcset="#" />
	<source class="webp" srcset="#" />
	<img alt="Ojambo Tutorial" src="#" />
</picture>
<button onclick="generateImage()">Generate Image</button>
<script type="text/JavaScript">
	function generateImage()
	{
		var canvas = document.querySelector('canvas');
		var context = canvas.getContext('2d');
		context.fillStyle = 'green';
		context.fillRect(0, 0, canvas.width, canvas.height); // Rectangle
		context.font = 'bold 18px sans-serif';
		context.fillStyle = 'white';
		context.textAlign = 'center';
		context.fillText('Ojambo Tutorial', canvas.width/2, canvas.height/2); // Text
		document.querySelector('picture source.avif').srcset = canvas.toDataURL('image/AVIF'); // AVIF
		document.querySelector('picture source.webp').srcset = canvas.toDataURL('image/WebP'); // WebP
		document.querySelector('picture img').src = canvas.toDataURL('image/png'); // PNG
	}
</script>

Screenshots:

JavaScript Image Maker
Animation Of Images Made By JavaScript

If you need a mobile, desktop or web application then contact Ojambo Services. Also if you want to learn programming to “do it yourself” then try Learning PHP which is an online course with a completion certificate. The only requirement is a web browser. You can use the built-in Web IDE to view your code and compile it online to view the result. You pay once for the online course and get access to the course at anytime without extra costs.

OjamboShop.com Learning PHP
OjamboShop.com Learning PHP Interactive Course Banner

Conclusion:

JavaScript can be used to create dynamic images in modern web browsers that support the Canvas API.

References: