
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
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 Articles
- 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
- Measure text height on an HTML5 canvas element
- HTML5 Canvas Text Stroke for Large Font Size
- Properties for HTML5 Canvas to create shadows
- How to create a canvas with Text using FabricJS?
- How to prevent text select outside HTML5 canvas on double-click?
- How to create a canvas with text cursor using FabricJS?
- Print a HTML5 canvas element
- Translating HTML5 canvas
- HTML5 Canvas distorted

Advertisements