HTML5 Canvas: Setting context on resize - Javascript Canvas

Javascript examples for Canvas:Text

  1. HOME
  2. Javascript
  3. Canvas
  4. Text

Description

HTML5 Canvas: Setting context on resize

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Text with MiterLimit</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.createjs.com/createjs-2015.11.26.combined.js"></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.Text_constructor(text,font,color);
    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)
   .set({
     x: 100, y:100,
    outline: 25
  });
var textFill = text.clone().set({
      outline: false,
     color: "#f00"
  });

var text2 = text.clone().set({
   y:300,
  miterLimit: 4
});
console.log(text2.miterLimit);
var textFill2 = textFill.clone().set({
   y:300
});
stage.addChild(text, textFill, text2, textFill2);
stage.update(event);
    }

      </script> 
   </head> 
   <body> 
      <canvas id="canvas" width="800" height="600"></canvas>  
   </body>
</html>

Related Tutorials