Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
cycle-canvas
Advanced tools
cycle-canvas - npm Package Compare versions
Comparing version 0.4.0 to 0.4.1
@@ -302,5 +302,4 @@ 'use strict'; | ||
| function makeCanvasDriver(selector, _ref) { | ||
| var width = _ref.width; | ||
| var height = _ref.height; | ||
| function makeCanvasDriver(selector) { | ||
| var canvasSize = arguments.length <= 1 || arguments[1] === undefined ? null : arguments[1]; | ||
@@ -315,4 +314,6 @@ var canvas = document.querySelector(selector); | ||
| canvas.width = width; | ||
| canvas.height = height; | ||
| if (canvasSize) { | ||
| canvas.width = canvasSize.width; | ||
| canvas.height = canvasSize.height; | ||
| } | ||
@@ -319,0 +320,0 @@ var context = canvas.getContext('2d'); |
| { | ||
| "name": "cycle-canvas", | ||
| "version": "0.4.0", | ||
| "version": "0.4.1", | ||
| "description": "A canvas driver for Cycle.js", | ||
@@ -10,3 +10,3 @@ "main": "lib/canvas-driver.js", | ||
| "scripts": { | ||
| "start": "babel-node ./examples/flappy-bird/server.js", | ||
| "start": "budo examples/flappy-bird/index.js:bundle.js -d examples/flappy-bird --live -p 8000 -- -t babelify -p browserify-hmr", | ||
| "test": "mocha --compilers js:babel-core/register", | ||
@@ -13,0 +13,0 @@ "autotest": "mocha --compilers js:babel-core/register --watch -R min", |
@@ -6,2 +6,3 @@ # cycle-canvas [](https://badge.fury.io/js/cycle-canvas) [](https://travis-ci.org/cyclejs-community/cycle-canvas) | ||
| Installation | ||
@@ -14,2 +15,3 @@ --- | ||
| Example | ||
@@ -73,2 +75,6 @@ --- | ||
| #### Creating a canvas driver | ||
| - [`makeCanvasDriver`](#makeCanvasDriver) | ||
| #### Drawing shapes and text | ||
@@ -86,2 +92,19 @@ | ||
| ## Creating a canvas driver | ||
| ### <a id="makeCanvasDriver"></a> `makeCanvasDriver(selector, canvasSize = null)` | ||
| A factory for the canvas driver function. | ||
| Receives a selector which should resolve to a canvas to which the driver function will attach. | ||
| If the selector does not resolve to a canvas, a new canvas element will be added at the bottom of the document and the driver will attach to that canvas. | ||
| The input to this driver is a stream of drawing instructions and transformations as detailed below. | ||
| #### Arguments | ||
| - `selector: string` a css selector to use in order to find a canvas to attach the driver to. | ||
| - `canvasSize: {width: integer, height: integer}` an object that denotes the size to set for the attached canvas. If null, the driver attaches to its canvas without altering its size. | ||
| ## Drawing shapes and text | ||
@@ -100,5 +123,5 @@ | ||
| - `draw: array` List of drawing operation objects. | ||
| - `fill: string` The color or style to use inside the rectangle. Default is *black #000*. | ||
| - `stroke: string` The color or style to use as the stroke style. Default is *black #000*. | ||
| - `clear: boolean` Sets all pixels in the rectangle to transparent. | ||
| - `fill: string` The color or style to use inside the rectangle. Default is *black #000*. | ||
| - `stroke: string` The color or style to use as the stroke style. Default is *black #000*. | ||
| - `clear: boolean` Sets all pixels in the rectangle to transparent. | ||
| - `children: array` List of child drawing shapes or text. This property is **optional**. | ||
@@ -139,7 +162,7 @@ | ||
| - `style: object` The style properties. | ||
| - `lineWidth: number` The width of the line. Default is *1*. | ||
| - `lineCap: string` The end point of the line. Default is *butt*. Possible values are *butt*, *round* and *square*. | ||
| - `lineJoin: string` The type of corner created when two lines meet. Default is *miter*. Possible values are *miter*, *round* and *bevel*. | ||
| - `strokeStyle: string` The color or style to use as the stroke style. Default is *black #000*. | ||
| - `lineDash: array` A list of numbers that specifies the line dash pattern. | ||
| - `lineWidth: number` The width of the line. Default is *1*. | ||
| - `lineCap: string` The end point of the line. Default is *butt*. Possible values are *butt*, *round* and *square*. | ||
| - `lineJoin: string` The type of corner created when two lines meet. Default is *miter*. Possible values are *miter*, *round* and *bevel*. | ||
| - `strokeStyle: string` The color or style to use as the stroke style. Default is *black #000*. | ||
| - `lineDash: array` A list of numbers that specifies the line dash pattern. | ||
| - `points: array` List of point objects that specify the x/y coordinates for each point. | ||
@@ -175,4 +198,4 @@ - `children: array` List of child drawing shapes or text. This property is **optional**. | ||
| - `draw: array` List of drawing operation objects. | ||
| - `fill: string` The color or style to use inside the polygon. If not present, the polygon will not be filled. | ||
| - `stroke: string` The color or style to use as the stroke style. If not present, the polygon will not have an outline. | ||
| - `fill: string` The color or style to use inside the polygon. If not present, the polygon will not be filled. | ||
| - `stroke: string` The color or style to use as the stroke style. If not present, the polygon will not have an outline. | ||
| - `children: array` List of child drawing shapes or text. This property is **optional**. | ||
@@ -208,4 +231,4 @@ | ||
| - `draw: array` List of drawing operations objects. | ||
| - `fill: string` The color or style to fill the text. Default is *black #000*. | ||
| - `stroke: string`The color or style to use as the stroke style. Default is *black #000*. | ||
| - `fill: string` The color or style to fill the text. Default is *black #000*. | ||
| - `stroke: string`The color or style to use as the stroke style. Default is *black #000*. | ||
| - `children: array` List of child drawing shapes or text. This property is **optional**. | ||
@@ -212,0 +235,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by5.71%
19379
- Lines of code
- increased by0.37%
273
- Number of lines in readme file
- increased by7.64%
324
No dependency changes