- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML5 Canvas Circle Text
To create a text inside circles in canvas, use the −
context.beginPath();
Example
The following is the canvas −
$("#demo").on("click", "#canvas1", function(event) { var canvas = document.getElementById('canvas1'); if (canvas.getContext) { var context = canvas.getContext("2d"); var w = 25; var x = event.pageX; var y = Math.floor(event.pageY-$(this).offset().top); context.beginPath(); context.fillStyle = "blue"; context.arc(x, y, w/2, 0, 2 * Math.PI, false); context.fill(); context = canvas.getContext("2d"); context.font = '9pt'; context.fillStyle = 'white'; context.textAlign = 'center'; context.fillText('amit', x, y+4); } });
HTML
<div id = demo> <canvas id = canvas1></canvas> </div>
- Related Articles
- Circle Collision Detection HTML5 Canvas
- Properties to create text using HTML5 Canvas
- Measure text height on an HTML5 canvas element
- HTML5 Canvas Text Stroke for Large Font Size
- Create a text inside circles in HTML5 Canvas
- Draw a circle filled with random color squares on HTML5 canvas
- How to prevent text select outside HTML5 canvas on double-click?
- Translating HTML5 canvas
- HTML5 Canvas distorted
- HTML5 Canvas Transformation
- HTML5 Canvas Transformation Matrix
- HTML5 Canvas Degree Symbol
- HTML5 Canvas Font Size Based on Canvas Size
- HTML5 Canvas to PNG File
- Display video inside HTML5 canvas

Advertisements