Merge pull request #125 from JakeSidSmith/context-value-consistency

v0.8.0 Context value consistency (initial values and retaining state)

docs/src/ts/components/document.tsx

@@ -171,6 +171,9 @@ export default class Document extends Component<Props, {}> {
                   <li>
                     Useful helper functions
                   </li>
+                  <li>
+                    Retain context state when resizing / clearing the canvas
+                  </li>
                 </ul>
 
                 <LinkHeader type="h2" header="About" />
@@ -188,7 +191,7 @@ export default class Document extends Component<Props, {}> {
                 </p>
 
                 <p>
-                  Along the way, I realised that a lot of the canvas attributes & methods were not very idiomatic,
+                  Along the way, I realized that a lot of the canvas attributes & methods were not very idiomatic,
                   and so I came up with some more suitable method / attribute names.
                 </p>
 
@@ -217,6 +220,14 @@ export default class Document extends Component<Props, {}> {
                     stroke('green')</code>, <code>fillCanvas('blue')</code>.
                 </p>
 
+                <p>
+                  The most recent change in Canvasimo <code>0.8.0</code> is that Canvasimo saves and retains the context
+                  state when resizing or clearing the canvas. This means that it's not always necessary to explicitly
+                  set values like font size, line width, and color in every draw loop - if you only ever use one font
+                  you can simply set this once when you're initializing Canvasimo and calls to <code>clearCanvas</code>,
+                  <code>setSize</code>, etc will not reset these values.
+                </p>
+
                 <LinkHeader type="h2" header="Examples" />
 
                 <LinkHeader type="h3" header="Basic shapes" />

docs/src/ts/demo.ts

@@ -10,7 +10,10 @@ if (!element) {
 }
 
 const parentElement = element.parentElement;
-const canvas = new Canvasimo(element as HTMLCanvasElement).setDensity(2);
+const canvas = new Canvasimo(element as HTMLCanvasElement)
+  .setDensity(window.devicePixelRatio >= 2 ? 2 : 1)
+  .setStrokeCap('round')
+  .setStrokeJoin('round');
 
 canvas.version(true);
 
@@ -97,8 +100,6 @@ const draw = () => {
 
   canvas
     .clearCanvas()
-    .setStrokeCap('round')
-    .setStrokeJoin('round')
     .translate(canvas.getWidth() / 2, canvas.getHeight());
 
   const treeDone = drawBranch(tree, 0, 6);

docs/src/ts/examples/basic-shapes.ts

@@ -12,7 +12,7 @@ const rect = canvas.getBoundingClientRect();
 const randoms = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(() => Math.random());
 
 canvas
-  .setDensity(2)
+  .setDensity(window.devicePixelRatio >= 2 ? 2 : 1)
   .setSize(rect.width, rect.height);
 
 const draw = () => {

docs/src/ts/examples/multiline-text.ts

@@ -12,7 +12,7 @@ const canvas = new Canvasimo(element as HTMLCanvasElement);
 const rect = canvas.getBoundingClientRect();
 
 canvas
-  .setDensity(2)
+  .setDensity(window.devicePixelRatio >= 2 ? 2 : 1)
   .setSize(rect.width, rect.height);
 
 const draw = () => {
@@ -29,6 +29,18 @@ const draw = () => {
     .fillCanvas('#FFFFFF')
     .setTextBaseline('top')
     .setFontFamily('arial')
+    .setTextAlign('center')
+    .setFontSize(FONT_SIZE - 2)
+    .fillTextMultiline(
+      'Try resizing the window! :D',
+      width / 2,
+      FONT_SIZE * 4,
+      width - MARGIN * 2,
+      undefined,
+      undefined,
+      '#555555'
+    )
+    .setTextAlign('start')
     .setFontSize(FONT_SIZE)
     .fillText(
       'Regular text that does not have newlines or automatic wrapping',
@@ -42,20 +54,8 @@ const draw = () => {
       MARGIN,
       FONT_SIZE * 2
     )
-    .setTextAlign('center')
-    .setFontSize(FONT_SIZE - 2)
-    .fillTextMultiline(
-      'Try resizing the window! :D',
-      width / 2,
-      FONT_SIZE * 4,
-      width - MARGIN * 2,
-      undefined,
-      undefined,
-      '#555555'
-    )
-    .setFontSize(FONT_SIZE)
-    .setFill('black')
     .translate(multilineTextOffset, 0)
+    .beginPath()
     .strokeLine(0, 0, 0, height, '#AAAAAA')
     .setTextAlign('left')
     .fillTextMultiline(
@@ -66,6 +66,7 @@ const draw = () => {
       'normal'
     )
     .translate(MARGIN * 2 + multilineTextWidth, 0)
+    .beginPath()
     .strokeLine(0, 0, 0, height, '#AAAAAA')
     .setTextAlign('center')
     .fillTextMultiline(
@@ -76,6 +77,7 @@ const draw = () => {
       'break-word'
     )
     .translate(MARGIN * 2 + multilineTextWidth, 0)
+    .beginPath()
     .strokeLine(0, 0, 0, height, '#AAAAAA')
     .setTextAlign('right')
     .fillTextMultiline(

package.json

@@ -1,8 +1,9 @@
 {
   "name": "canvasimo",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "An HTML5 canvas drawing library, with 150+ useful methods, jQuery-like fluent interface, and cross-browser compatibility enhancements.",
   "main": "dist/index.js",
+  "module": "build/index.js",
   "types": "build/index.d.ts",
   "directories": {
     "example": "examples"

src/constants.ts

@@ -23,6 +23,13 @@ export const IMAGE_SMOOTHING_KEYS = [
   'webkitImageSmoothingEnabled',
 ] as Array<'imageSmoothingEnabled'>;
 
+export const IMAGE_SMOOTHING_QUALITY_KEYS = [
+  'imageSmoothingQuality',
+  'msImageSmoothingQuality',
+  'mozImageSmoothingQuality',
+  'webkitImageSmoothingQuality',
+] as Array<'imageSmoothingQuality'>;
+
 export const CONTEXT_TYPE = '2d';
 
 export const INCORRECT_POINT_FORMAT = `Path points must be an array of:\n
@@ -31,7 +38,8 @@ export const INCORRECT_POINT_FORMAT = `Path points must be an array of:\n
 export const INCORRECT_GET_ANGLE_ARGUMENTS = 'Incorrect number of arguments supplied for getAngle. ' +
  'Arguments must be [x1, y1, x2, y2] or [x1, y1, x2, y2, x3, y3].';
 
-export const DEFAULT_FONT = ['normal', 'normal', 'normal', '10px', 'sans-serif'];
+export const DEFAULT_FONT_PARTS = ['normal', 'normal', 'normal', '10px', 'sans-serif'];
+export const DEFAULT_FONT = DEFAULT_FONT_PARTS.join(' ');
 export const DEFAULT_DENSITY = 1;
 
 export const MATCHES_SPECIAL_FILL = /^(nonzero|evenodd)$/i;
@@ -44,3 +52,29 @@ export const MATCHES_WHITESPACE = /\s+/g;
 export const MATCHES_ALL_WHITESPACE = /^\s*$/;
 export const MATCHES_FONT_SIZE = /(^|\s+)(\d*\.?\d+)([a-z]+|%)(\/\d*\.?\d+(?:[a-z]+|%)?)?\s/i;
 export const MATCHES_WORD_BREAKS = /(?![^\w\s])\b/g;
+
+export const DEFAULT_CONTEXT_VALUES: {[i: string]: string | number} = {
+  globalAlpha: 1,
+  globalCompositeOperation: 'source-over',
+  strokeStyle: '#000000',
+  fillStyle: '#000000',
+  shadowOffsetX: 0,
+  shadowOffsetY: 0,
+  shadowBlur: 0,
+  shadowColor: 'rgba(0, 0, 0, 0)',
+  lineWidth: 1,
+  lineCap: 'butt',
+  lineJoin: 'miter',
+  miterLimit: 10,
+  lineDashOffset: 0,
+  font: DEFAULT_FONT,
+  textAlign: 'start',
+  textBaseline: 'alphabetic',
+};
+
+export const DEFAULT_IMAGE_SMOOTHING_VALUES = {
+  imageSmoothingEnabled: true,
+  imageSmoothingQuality: 'low' as ImageSmoothingQuality,
+};
+
+export const DEFAULT_LINE_DASH = [];