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:

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.

Conclusion:

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

References:

• Learning PHP. An Interactive Online Course
• Contact Ojamboservices. For help creating web, mobile or desktop applications
• Canvas element