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
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](/wp-content/uploads/2024/06/JavaScript_Image_Maker.avif)
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](/wp-content/uploads/2024/06/shoplearningphp-white_2024_001.avif)
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