canvascontext.js

Table of Contents

  1. accidental.js
  2. annotation.js
  3. articulation.js
  4. barnote.js
  5. beam.js
  6. bend.js
  7. boundingbox.js
  8. boundingboxcomputation.js
  9. canvascontext.js
  10. clef.js
  11. clefnote.js
  12. crescendo.js
  13. curve.js
  14. dot.js
  15. easyscore.js
  16. element.js
  17. factory.js
  18. formatter.js
  19. fraction.js
  20. frethandfinger.js
  21. ghostnote.js
  22. glyph.js
  23. gracenote.js
  24. gracenotegroup.js
  25. gracetabnote.js
  26. index.js
  27. keymanager.js
  28. keysignature.js
  29. modifier.js
  30. modifiercontext.js
  31. music.js
  32. note.js
  33. notehead.js
  34. notesubgroup.js
  35. ornament.js
  36. parser.js
  37. pedalmarking.js
  38. raphaelcontext.js
  39. renderer.js
  40. stave.js
  41. stavebarline.js
  42. staveconnector.js
  43. stavehairpin.js
  44. staveline.js
  45. stavemodifier.js
  46. stavenote.js
  47. staverepetition.js
  48. stavesection.js
  49. stavetempo.js
  50. stavetext.js
  51. stavetie.js
  52. stavevolta.js
  53. stem.js
  54. stemmablenote.js
  55. stringnumber.js
  56. strokes.js
  57. svgcontext.js
  58. system.js
  59. tables.js
  60. tabnote.js
  61. tabslide.js
  62. tabstave.js
  63. tabtie.js
  64. textbracket.js
  65. textdynamics.js
  66. textnote.js
  67. tickable.js
  68. tickcontext.js
  69. timesignature.js
  70. timesignote.js
  71. tremolo.js
  72. tuning.js
  73. tuplet.js
  74. vex.js
  75. vibrato.js
  76. vibratobracket.js
  77. voice.js
  78. voicegroup.js

VexFlow - Copyright (c) Mohit Muthanna 2010. Mohit Muthanna mohit@muthanna.com

A rendering context for the Raphael backend.

Copyright Mohit Cheppudira 2010

/** @constructor */
export class CanvasContext {
  static get WIDTH() {
    return 600;
  }
  static get HEIGHT() {
    return 400;
  }

  constructor(context) {

Use a name that is unlikely to clash with a canvas context property

    this.vexFlowCanvasContext = context;
    if (!context.canvas) {
      this.canvas = {
        width: CanvasContext.WIDTH,
        height: CanvasContext.HEIGHT,
      };
    } else {
      this.canvas = context.canvas;
    }
  }

  clear() {
    this.vexFlowCanvasContext.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }

Containers not implemented

  openGroup() {}
  closeGroup() {}
  add() {}

  setFont(family, size, weight) {
    this.vexFlowCanvasContext.font = (weight || '') + ' ' + size + 'pt ' + family;
    return this;
  }

  setRawFont(font) {
    this.vexFlowCanvasContext.font = font;
    return this;
  }

  setFillStyle(style) {
    this.vexFlowCanvasContext.fillStyle = style;
    return this;
  }

  setBackgroundFillStyle(style) {
    this.background_fillStyle = style;
    return this;
  }

  setStrokeStyle(style) {
    this.vexFlowCanvasContext.strokeStyle = style;
    return this;
  }

  setShadowColor(style) {
    this.vexFlowCanvasContext.shadowColor = style;
    return this;
  }

  setShadowBlur(blur) {
    this.vexFlowCanvasContext.shadowBlur = blur;
    return this;
  }

  setLineWidth(width) {
    this.vexFlowCanvasContext.lineWidth = width;
    return this;
  }

  setLineCap(cap_type) {
    this.vexFlowCanvasContext.lineCap = cap_type;
    return this;
  }

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.

  setLineDash(dash) {
    this.vexFlowCanvasContext.lineDash = dash;
    return this;
  }

  scale(x, y) {
    return this.vexFlowCanvasContext.scale(parseFloat(x), parseFloat(y));
  }

  resize(width, height) {
    return this.vexFlowCanvasContext.resize(
        parseInt(width, 10), parseInt(height, 10));
  }

  rect(x, y, width, height) {
    return this.vexFlowCanvasContext.rect(x, y, width, height);
  }

  fillRect(x, y, width, height) {
    return this.vexFlowCanvasContext.fillRect(x, y, width, height);
  }

  clearRect(x, y, width, height) {
    return this.vexFlowCanvasContext.clearRect(x, y, width, height);
  }

  beginPath() {
    return this.vexFlowCanvasContext.beginPath();
  }

  moveTo(x, y) {
    return this.vexFlowCanvasContext.moveTo(x, y);
  }

  lineTo(x, y) {
    return this.vexFlowCanvasContext.lineTo(x, y);
  }

  bezierCurveTo(x1, y1, x2, y2, x, y) {
    return this.vexFlowCanvasContext.bezierCurveTo(x1, y1, x2, y2, x, y);
  }

  quadraticCurveTo(x1, y1, x, y) {
    return this.vexFlowCanvasContext.quadraticCurveTo(x1, y1, x, y);
  }

This is an attempt (hack) to simulate the HTML5 canvas arc method.

  arc(x, y, radius, startAngle, endAngle, antiClockwise) {
    return this.vexFlowCanvasContext.arc(x, y, radius, startAngle, endAngle, antiClockwise);
  }

Adapted from the source for Raphael’s Element.glow

  glow() {
    return this.vexFlowCanvasContext.glow();
  }

  fill() {
    return this.vexFlowCanvasContext.fill();
  }

  stroke() {
    return this.vexFlowCanvasContext.stroke();
  }

  closePath() {
    return this.vexFlowCanvasContext.closePath();
  }

  measureText(text) {
    return this.vexFlowCanvasContext.measureText(text);
  }

  fillText(text, x, y) {
    return this.vexFlowCanvasContext.fillText(text, x, y);
  }

  save() {
    return this.vexFlowCanvasContext.save();
  }

  restore() {
    return this.vexFlowCanvasContext.restore();
  }
}
h