HTML5 Canvas: Setting context on resize - Javascript Canvas

Javascript examples for Canvas:Text


HTML5 Canvas: Setting context on resize

Demo Code

ResultView the demo in separate window

      <title>Text with MiterLimit</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src=""></script> 
      <script type="text/javascript">
    window.onload=function(){//from ww  w  . ja v  a 2 s.  co  m
(function() {
   "use strict"
  function MiterText(text, font, color, miterLimit) {
    this.miterLimit = miterLimit;
  var p = createjs.extend(MiterText, createjs.Text);
  p.draw = function(ctx, ignoreCache) {
    ctx.miterLimit = this.miterLimit;
    if (this.Text_draw(ctx, ignoreCache)) { return true; }
    return true;
  p.clone = function() {
      return this._cloneProps(new MiterText(this.text, this.font, this.color, this.miterLimit));
  createjs.MiterText = createjs.promote(MiterText, "Text");
// Draw some text
var stage = new createjs.Stage("canvas");
var text = new createjs.MiterText("Water", "100px Times New Roman", "#000", 2)
     x: 100, y:100,
    outline: 25
var textFill = text.clone().set({
      outline: false,
     color: "#f00"

var text2 = text.clone().set({
  miterLimit: 4
var textFill2 = textFill.clone().set({
stage.addChild(text, textFill, text2, textFill2);

      <canvas id="canvas" width="800" height="600"></canvas>  

Related Tutorials