Code Monkey home page Code Monkey logo

canvas-txt's Introduction

canvas txt

Canvas Txt ๐Ÿ“โœ

Better way to render text on the HTML5 Canvas

NPM NPM NPM

A Miniscule library to render text on HTML5 Canvas with ZERO dependencies ๐Ÿ†Ž

Features

  • Multiline text
  • Auto line breaks
  • Horizontal Align
  • Vertical Align
  • Easy Debugging

Demo

See Demo: Here

Install

npm install canvas-txt --save

or

yarn add canvas-txt

Usage

<canvas id="myCanvas" width="500" height="500"></canvas>

Webpack

import canvasTxt from 'canvas-txt'

const c = document.getElementById('myCanvas')
const ctx = c.getContext('2d')

const txt = 'Lorem ipsum dolor sit amet'

canvasTxt.fontSize = 24

canvasTxt.drawText(ctx, txt, 100, 200, 200, 200)
//canvasTxt.drawText(ctx,txt,x,y,width,height);

Node canvas

See nodejs demo

const { createCanvas } = require('canvas')

const canvasTxt = require('canvas-txt').default

const canvas = createCanvas(400, 400)
const ctx = canvas.getContext('2d')

ctx.fillStyle = 'black'
const txt = 'Lorem ipsum dolor sit amet'

canvasTxt.drawText(ctx, txt, 50, 50, 200, 200)

CDN

See fiddle : here

<script src="//unpkg.com/canvas-txt"></script>
var canvasTxt = window.canvasTxt.default
/// ...remaining same as webpack

Properties

Properties Default Description
debug false Shows the border and align gravity for debugging purposes
align center Text align. Other possible values: left, right
vAlign middle Text vertical align. Other possible values: top, bottom
fontSize 14 Font size of the text in px
font Arial Font family of the text
fontStyle '' Font style, same as css font-style. Examples: italic, oblique 40deg
fontVariant '' Font variant, same as css font-variant. Examples: small-caps, slashed-zero
fontWeight '' Font weight, same as css font-weight. Examples: bold, 100
lineHeight null Line height of the text, if set to null it tries to auto-detect the value
justify false Justify text if true, it will insert spaces between words when necessary.

Methods

Method Description
drawText(ctx,text,x,y,width,height) To draw the text to the canvas

Example

import canvasTxt from 'canvas-txt'

const c = document.getElementById('myCanvas')
const ctx = c.getContext('2d')

//You can use \n to define custom line breaks
const txt = 'Lorem \nipsum dolor sit amet'

//You can also use other methods alongside this
ctx.fillStyle = '#ff0000' //red color text

canvasTxt.font = 'Verdana'
canvasTxt.fontSize = 20
canvasTxt.align = 'left'
canvasTxt.lineHeight = 60
canvasTxt.debug = true //shows debug info
canvasTxt.justify = false
canvasTxt.drawText(ctx, txt, 100, 200, 200, 200)

React wrapper

A wrapper of this library is available for react. Check neomusic/react-canvas-txt

canvas-txt's People

Contributors

b-vm avatar dependabot[bot] avatar geongeorge avatar neomusic avatar strdr4605 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.