

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create a text inside circles in HTML5 Canvas
To create a text inside circles in canvas, use the:
context.beginPath();
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 Questions & Answers
- Properties to create text using HTML5 Canvas
- Display video inside HTML5 canvas
- HTML5 Canvas Circle Text
- Create a pattern with HTML5 Canvas
- How to add text inside a Tkinter Canvas?
- Draw part of an image inside HTML5 canvas
- HTML5 Canvas Text Stroke for Large Font Size
- Measure text height on an HTML5 canvas element
- Properties for HTML5 Canvas to create shadows
- Print a HTML5 canvas element
- Translating HTML5 canvas
- HTML5 Canvas distorted
- HTML5 Canvas Transformation
- Creating a LabelFrame inside a Tkinter Canvas
- How to create a canvas with text cursor using FabricJS?
Advertisements