vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
849 lines (605 loc) • 26.5 kB
HTML
<html>
<head>
<title>canvascontext.js</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" media="all" href="public/stylesheets/normalize.css" />
<link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
<div class="container">
<div class="page">
<div class="header">
<h1>canvascontext.js</h1>
<div class="toc">
<h3>Table of Contents</h3>
<ol>
<li>
<a class="source" href="accidental.html">
accidental.js
</a>
</li>
<li>
<a class="source" href="annotation.html">
annotation.js
</a>
</li>
<li>
<a class="source" href="articulation.html">
articulation.js
</a>
</li>
<li>
<a class="source" href="barnote.html">
barnote.js
</a>
</li>
<li>
<a class="source" href="beam.html">
beam.js
</a>
</li>
<li>
<a class="source" href="bend.html">
bend.js
</a>
</li>
<li>
<a class="source" href="boundingbox.html">
boundingbox.js
</a>
</li>
<li>
<a class="source" href="boundingboxcomputation.html">
boundingboxcomputation.js
</a>
</li>
<li>
<a class="source" href="canvascontext.html">
canvascontext.js
</a>
</li>
<li>
<a class="source" href="clef.html">
clef.js
</a>
</li>
<li>
<a class="source" href="clefnote.html">
clefnote.js
</a>
</li>
<li>
<a class="source" href="crescendo.html">
crescendo.js
</a>
</li>
<li>
<a class="source" href="curve.html">
curve.js
</a>
</li>
<li>
<a class="source" href="dot.html">
dot.js
</a>
</li>
<li>
<a class="source" href="easyscore.html">
easyscore.js
</a>
</li>
<li>
<a class="source" href="element.html">
element.js
</a>
</li>
<li>
<a class="source" href="factory.html">
factory.js
</a>
</li>
<li>
<a class="source" href="formatter.html">
formatter.js
</a>
</li>
<li>
<a class="source" href="fraction.html">
fraction.js
</a>
</li>
<li>
<a class="source" href="frethandfinger.html">
frethandfinger.js
</a>
</li>
<li>
<a class="source" href="ghostnote.html">
ghostnote.js
</a>
</li>
<li>
<a class="source" href="glyph.html">
glyph.js
</a>
</li>
<li>
<a class="source" href="glyphnote.html">
glyphnote.js
</a>
</li>
<li>
<a class="source" href="gracenote.html">
gracenote.js
</a>
</li>
<li>
<a class="source" href="gracenotegroup.html">
gracenotegroup.js
</a>
</li>
<li>
<a class="source" href="gracetabnote.html">
gracetabnote.js
</a>
</li>
<li>
<a class="source" href="index.html">
index.js
</a>
</li>
<li>
<a class="source" href="keymanager.html">
keymanager.js
</a>
</li>
<li>
<a class="source" href="keysignature.html">
keysignature.js
</a>
</li>
<li>
<a class="source" href="keysignote.html">
keysignote.js
</a>
</li>
<li>
<a class="source" href="modifier.html">
modifier.js
</a>
</li>
<li>
<a class="source" href="modifiercontext.html">
modifiercontext.js
</a>
</li>
<li>
<a class="source" href="multimeasurerest.html">
multimeasurerest.js
</a>
</li>
<li>
<a class="source" href="music.html">
music.js
</a>
</li>
<li>
<a class="source" href="note.html">
note.js
</a>
</li>
<li>
<a class="source" href="notehead.html">
notehead.js
</a>
</li>
<li>
<a class="source" href="notesubgroup.html">
notesubgroup.js
</a>
</li>
<li>
<a class="source" href="ornament.html">
ornament.js
</a>
</li>
<li>
<a class="source" href="parser.html">
parser.js
</a>
</li>
<li>
<a class="source" href="pedalmarking.html">
pedalmarking.js
</a>
</li>
<li>
<a class="source" href="raphaelcontext.html">
raphaelcontext.js
</a>
</li>
<li>
<a class="source" href="registry.html">
registry.js
</a>
</li>
<li>
<a class="source" href="renderer.html">
renderer.js
</a>
</li>
<li>
<a class="source" href="repeatnote.html">
repeatnote.js
</a>
</li>
<li>
<a class="source" href="smufl.html">
smufl.js
</a>
</li>
<li>
<a class="source" href="stave.html">
stave.js
</a>
</li>
<li>
<a class="source" href="stavebarline.html">
stavebarline.js
</a>
</li>
<li>
<a class="source" href="staveconnector.html">
staveconnector.js
</a>
</li>
<li>
<a class="source" href="stavehairpin.html">
stavehairpin.js
</a>
</li>
<li>
<a class="source" href="staveline.html">
staveline.js
</a>
</li>
<li>
<a class="source" href="stavemodifier.html">
stavemodifier.js
</a>
</li>
<li>
<a class="source" href="stavenote.html">
stavenote.js
</a>
</li>
<li>
<a class="source" href="staverepetition.html">
staverepetition.js
</a>
</li>
<li>
<a class="source" href="stavesection.html">
stavesection.js
</a>
</li>
<li>
<a class="source" href="stavetempo.html">
stavetempo.js
</a>
</li>
<li>
<a class="source" href="stavetext.html">
stavetext.js
</a>
</li>
<li>
<a class="source" href="stavetie.html">
stavetie.js
</a>
</li>
<li>
<a class="source" href="stavevolta.html">
stavevolta.js
</a>
</li>
<li>
<a class="source" href="stem.html">
stem.js
</a>
</li>
<li>
<a class="source" href="stemmablenote.html">
stemmablenote.js
</a>
</li>
<li>
<a class="source" href="stringnumber.html">
stringnumber.js
</a>
</li>
<li>
<a class="source" href="strokes.html">
strokes.js
</a>
</li>
<li>
<a class="source" href="svgcontext.html">
svgcontext.js
</a>
</li>
<li>
<a class="source" href="system.html">
system.js
</a>
</li>
<li>
<a class="source" href="tables.html">
tables.js
</a>
</li>
<li>
<a class="source" href="tabnote.html">
tabnote.js
</a>
</li>
<li>
<a class="source" href="tabslide.html">
tabslide.js
</a>
</li>
<li>
<a class="source" href="tabstave.html">
tabstave.js
</a>
</li>
<li>
<a class="source" href="tabtie.html">
tabtie.js
</a>
</li>
<li>
<a class="source" href="textbracket.html">
textbracket.js
</a>
</li>
<li>
<a class="source" href="textdynamics.html">
textdynamics.js
</a>
</li>
<li>
<a class="source" href="textnote.html">
textnote.js
</a>
</li>
<li>
<a class="source" href="tickable.html">
tickable.js
</a>
</li>
<li>
<a class="source" href="tickcontext.html">
tickcontext.js
</a>
</li>
<li>
<a class="source" href="timesignature.html">
timesignature.js
</a>
</li>
<li>
<a class="source" href="timesignote.html">
timesignote.js
</a>
</li>
<li>
<a class="source" href="tremolo.html">
tremolo.js
</a>
</li>
<li>
<a class="source" href="tuning.html">
tuning.js
</a>
</li>
<li>
<a class="source" href="tuplet.html">
tuplet.js
</a>
</li>
<li>
<a class="source" href="vex.html">
vex.js
</a>
</li>
<li>
<a class="source" href="vibrato.html">
vibrato.js
</a>
</li>
<li>
<a class="source" href="vibratobracket.html">
vibratobracket.js
</a>
</li>
<li>
<a class="source" href="voice.html">
voice.js
</a>
</li>
<li>
<a class="source" href="voicegroup.html">
voicegroup.js
</a>
</li>
</ol>
</div>
</div>
<p><a href="http://vexflow.com">VexFlow</a> - Copyright (c) Mohit Muthanna 2010.
Mohit Muthanna <a href="mailto:mohit@muthanna.com">mohit@muthanna.com</a></p>
<p>A rendering context for the Raphael backend.</p>
<p>Copyright Mohit Cheppudira 2010</p>
<div class='highlight'><pre>
<span class="hljs-keyword">import</span> { Vex } <span class="hljs-keyword">from</span> <span class="hljs-string">'./vex'</span>;
<span class="hljs-comment">/** @constructor */</span>
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CanvasContext</span> </span>{
<span class="hljs-keyword">static</span> get WIDTH() {
<span class="hljs-keyword">return</span> <span class="hljs-number">600</span>;
}
<span class="hljs-keyword">static</span> get HEIGHT() {
<span class="hljs-keyword">return</span> <span class="hljs-number">400</span>;
}
<span class="hljs-keyword">static</span> get CANVAS_BROWSER_SIZE_LIMIT() {
<span class="hljs-keyword">return</span> <span class="hljs-number">32767</span>; <span class="hljs-comment">// Chrome/Firefox. Could be determined more precisely by npm module canvas-size</span>
}
<span class="hljs-keyword">static</span> SanitizeCanvasDims(width, height) {
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">Math</span>.max(width, height) > <span class="hljs-keyword">this</span>.CANVAS_BROWSER_SIZE_LIMIT) {
Vex.W(
<span class="hljs-string">'Canvas dimensions exceed browser limit. Cropping to '</span> +
<span class="hljs-keyword">this</span>.CANVAS_BROWSER_SIZE_LIMIT
);
<span class="hljs-keyword">if</span> (width > <span class="hljs-keyword">this</span>.CANVAS_BROWSER_SIZE_LIMIT) {
width = <span class="hljs-keyword">this</span>.CANVAS_BROWSER_SIZE_LIMIT;</pre></div>
<p>note: Math.min return 0 for undefined, NaN for null. Would change inputs.</p>
<div class='highlight'><pre> }
<span class="hljs-keyword">if</span> (height > <span class="hljs-keyword">this</span>.CANVAS_BROWSER_SIZE_LIMIT) {
height = <span class="hljs-keyword">this</span>.CANVAS_BROWSER_SIZE_LIMIT;
}
}
<span class="hljs-keyword">return</span> [width, height];
}
<span class="hljs-keyword">constructor</span>(context) {</pre></div>
<p>Use a name that is unlikely to clash with a canvas context
property</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.vexFlowCanvasContext = context;
<span class="hljs-keyword">if</span> (!context.canvas) {
<span class="hljs-keyword">this</span>.canvas = {
<span class="hljs-attr">width</span>: CanvasContext.WIDTH,
<span class="hljs-attr">height</span>: CanvasContext.HEIGHT,
};
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">this</span>.canvas = context.canvas;
}
}
clear() {
<span class="hljs-keyword">this</span>.vexFlowCanvasContext.clearRect(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-keyword">this</span>.canvas.width, <span class="hljs-keyword">this</span>.canvas.height);
}</pre></div>
<p>Containers not implemented</p>
<div class='highlight'><pre> openGroup() {}
closeGroup() {}
add() {}
setFont(family, size, weight) {
<span class="hljs-keyword">this</span>.vexFlowCanvasContext.font = (weight || <span class="hljs-string">''</span>) + <span class="hljs-string">' '</span> + size + <span class="hljs-string">'pt '</span> + family;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
setRawFont(font) {
<span class="hljs-keyword">this</span>.vexFlowCanvasContext.font = font;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
setFillStyle(style) {
<span class="hljs-keyword">this</span>.vexFlowCanvasContext.fillStyle = style;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
setBackgroundFillStyle(style) {
<span class="hljs-keyword">this</span>.background_fillStyle = style;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
setStrokeStyle(style) {
<span class="hljs-keyword">this</span>.vexFlowCanvasContext.strokeStyle = style;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
setShadowColor(style) {
<span class="hljs-keyword">this</span>.vexFlowCanvasContext.shadowColor = style;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
setShadowBlur(blur) {
<span class="hljs-keyword">this</span>.vexFlowCanvasContext.shadowBlur = blur;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
setLineWidth(width) {
<span class="hljs-keyword">this</span>.vexFlowCanvasContext.lineWidth = width;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
setLineCap(cap_type) {
<span class="hljs-keyword">this</span>.vexFlowCanvasContext.lineCap = cap_type;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}</pre></div>
<p>setLineDash: is the one native method in a canvas context
that begins with set, therefore we don’t bolster the method
if it already exists (see renderer.bolsterCanvasContext).
If it doesn’t exist, we bolster it and assume it’s looking for
a ctx.lineDash method, as previous versions of VexFlow
expected.</p>
<div class='highlight'><pre> setLineDash(dash) {
<span class="hljs-keyword">this</span>.vexFlowCanvasContext.lineDash = dash;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
scale(x, y) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.vexFlowCanvasContext.scale(<span class="hljs-built_in">parseFloat</span>(x), <span class="hljs-built_in">parseFloat</span>(y));
}
resize(width, height) {
[width, height] = <span class="hljs-keyword">this</span>.SanitizeCanvasDims(<span class="hljs-built_in">parseInt</span>(width, <span class="hljs-number">10</span>), <span class="hljs-built_in">parseInt</span>(height, <span class="hljs-number">10</span>));
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.vexFlowCanvasContext.resize(width, height);
}
rect(x, y, width, height) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.vexFlowCanvasContext.rect(x, y, width, height);
}
fillRect(x, y, width, height) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.vexFlowCanvasContext.fillRect(x, y, width, height);
}
clearRect(x, y, width, height) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.vexFlowCanvasContext.clearRect(x, y, width, height);
}
beginPath() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.vexFlowCanvasContext.beginPath();
}
moveTo(x, y) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.vexFlowCanvasContext.moveTo(x, y);
}
lineTo(x, y) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.vexFlowCanvasContext.lineTo(x, y);
}
bezierCurveTo(x1, y1, x2, y2, x, y) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.vexFlowCanvasContext.bezierCurveTo(x1, y1, x2, y2, x, y);
}
quadraticCurveTo(x1, y1, x, y) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.vexFlowCanvasContext.quadraticCurveTo(x1, y1, x, y);
}</pre></div>
<p>This is an attempt (hack) to simulate the HTML5 canvas
arc method.</p>
<div class='highlight'><pre> arc(x, y, radius, startAngle, endAngle, antiClockwise) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.vexFlowCanvasContext.arc(x, y, radius, startAngle, endAngle, antiClockwise);
}</pre></div>
<p>Adapted from the source for Raphael’s Element.glow</p>
<div class='highlight'><pre> glow() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.vexFlowCanvasContext.glow();
}
fill() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.vexFlowCanvasContext.fill();
}
stroke() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.vexFlowCanvasContext.stroke();
}
closePath() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.vexFlowCanvasContext.closePath();
}
measureText(text) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.vexFlowCanvasContext.measureText(text);
}
fillText(text, x, y) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.vexFlowCanvasContext.fillText(text, x, y);
}
save() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.vexFlowCanvasContext.save();
}
restore() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.vexFlowCanvasContext.restore();
}
}</pre></div>
<div class="fleur">h</div>
</div>
</div>
</body>
</html>