modernize js

.github/workflows/test.yml

@@ -20,11 +20,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
       - name: Install dependencies
         run: |
-          sudo apt-get update && sudo apt-get install -y graphicsmagick libxss1 build-essential chrpath libssl-dev libxft-dev libfontconfig1 libfontconfig1-dev
-          wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
-          tar xvjf phantomjs-2.1.1-linux-x86_64.tar.bz2
-          sudo mv phantomjs-2.1.1-linux-x86_64 /usr/local/share
-          sudo ln -sf /usr/local/share/phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/local/bin
+          sudo apt-get update && sudo apt-get install -y graphicsmagick libxss1
           yarn install
       - name: Test with yarn
         run: |

.gitignore

@@ -57,5 +57,4 @@ typings/
 # dotenv environment variables file
 .env
 
-diff.html
-test/img/
+tests/img/

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 Joshua Gould
+Copyright (c) 2023 Joshua Gould
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,66 +1,38 @@
 # Canvas2PDF 
 
-Canvas2PDF exports your HTML canvas as PDF using JavaScript. Note that this library generates actual PDF drawing calls to create a PDF with vector graphics, unlike some alternate libraries which rasterize your canvas and place it as an image in your PDF.
+Canvas2PDF exports your HTML canvas as PDF using JavaScript. 
+Note that this library generates actual PDF drawing calls to create a PDF with vector graphics, 
+unlike some alternate libraries which rasterize your canvas and place it as an image in your PDF.
 
-## How it works
 
-We create a mock 2d canvas context. Use the canvas context like you would on a normal canvas. As you call methods, we 
-use PDFKit to generate a PDF document.
-
-## Browser Usage
+## Usage
 
 ```javascript
-//Create a new PDF canvas context.
-var ctx = new canvas2pdf.PdfContext(blobStream());
+import PdfContext from '/src/canvas2pdf';
+import blobStream from 'blob-stream';
+import { saveAs } from 'file-saver';
+
+// Create a new PDF canvas context.
+const ctx = new PdfContext(blobStream());
 
-//draw your canvas like you would normally
-ctx.fillStyle='yellow';
+// draw your canvas like you would normally
+ctx.fillStyle = 'yellow';
 ctx.fillRect(100,100,100,100);
 // more canvas drawing, etc...
 
-//convert your PDF to a Blob and save to file
+// convert your PDF to a Blob and save to file
 ctx.stream.on('finish', function () {
     var blob = ctx.stream.toBlob('application/pdf');
     saveAs(blob, 'example.pdf', true);
 });
 ctx.end();
 ```
 
-## Node Usage
-
-```javascript
-PDFDocument = require('pdfkit')
-const fs = require('fs')
-const canvas2pdf = require('canvas2pdf')
-
-const file = fs.createWriteStream('example.pdf')
-//Create a new PDF canvas context.
-const ctx = new canvas2pdf.PdfContext(file)
-
-//draw your canvas like you would normally
-ctx.fillStyle = 'yellow'
-ctx.fillRect(100, 100, 100, 100)
-// more canvas drawing, etc...
-
-ctx.stream.on('finish', function () {
-  file.end()
-})
-ctx.end()
-```
-
-## Dependencies
-+ [PDFKit](http://pdfkit.org/)
-+ [blob-stream](https://github.com/devongovett/blob-stream) required when using in a web browser.
-
-## Using with node.js
-
-`canvas2pdf` works with node.js. Note that neither a DOM or canvas library is needed.  
-
 ## Interactive Browser Demo
-[Open Demo](https://joshua-gould.github.io/canvas2pdf/demo.html)
+[Open Demo](https://joshua-gould.github.io/canvas2pdf/dist/index.html)
+
 
 ## Notes
-+ Inspired by [Canvas2Svg](https://github.com/gliffy/canvas2svg)
 + Calling fill and then stroke consecutively only executes fill
 + Some canvas 2d context methods are not implemented yet (e.g. setTransform and arcTo)
 
@@ -69,4 +41,4 @@ ctx.end()
 MIT
 
 # Developer Dependencies
-+ Ghostscript and GraphicsMagick are required for running tests
++ GraphicsMagick is required for running tests

app.js

@@ -0,0 +1,33 @@
+import PdfContext from '/src/canvas2pdf';
+import blobStream from 'blob-stream';
+
+const editor = document.getElementById('editor_source');
+
+const examplePicker = document.getElementById('example_picker');
+examplePicker.onchange = function() {
+  editor.textContent = document.getElementById(examplePicker.value).textContent;
+  createPdf();
+};
+
+const iframe = document.querySelector('iframe');
+const createPdf = function() {
+  const text = editor.textContent;
+
+  const stream = blobStream();
+  const ctx = new PdfContext(stream);
+
+  ctx.stream.on('finish', function() {
+    iframe.src = ctx.stream.toBlobURL('application/pdf');
+  });
+  eval(text);
+};
+;
+document.getElementById('redraw').addEventListener(
+  'click',
+  function() {
+    createPdf();
+  },
+  false
+);
+
+createPdf();