Merge pull request #31 from joshua-gould/pages

rebuilt
joshua-gould · Oct 6, 2023 · c7d7c17 · c7d7c17
2 parents 996d677 + 59bfd73
commit c7d7c17
Show file tree

Hide file tree

Showing 2 changed files with 50,158 additions and 15 deletions.
diff --git a/dist/canvas2pdf.js b/dist/canvas2pdf.js
diff --git a/dist/index.html b/dist/index.html
@@ -1,16 +1,114 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<head>
- <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
- <title>Test</title>
- <script src="/index.07ea7aca.js" defer=""></script>
-</head>
-<body>
-<div>
- <canvas id="canvas-output" width="600" height="600"></canvas>
-</div>
-<textarea id="pdf-text"></textarea>
-</body>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
+ <title>Canvas2PDF Demo</title>
+ <script src="/index.5baa4167.js" defer=""></script>
+ </head>
+ <body>
+ <h1>Canvas2PDF Demo</h1>
+ <div>
+ <label for="example_picker">Load Example:</label><select id="example_picker">
+ <option value="editor_source">Clock</option>
+ <option value="image_example">Image</option>
+ </select>
+ </div>
+ <hr>
+ <div style="width: 600px">
+ <button style="float: right" id="redraw">Redraw</button>
+ </div>
+ <br>
+ <textarea id="editor_source" style="width: 600px; height: 400px">
+// from https://www.w3schools.com/graphics/tryit.asp?filename=trycanvas_clock_hands
+var radius = 200;
+ctx.translate(radius, radius);
+radius = radius * 0.90
+drawClock();
+ctx.end();
+
+function drawClock() {
+ drawFace(ctx, radius);
+ drawNumbers(ctx, radius);
+ drawTime(ctx, radius);
+}
+
+function drawFace(ctx, radius) {
+ var grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
+ grad.addColorStop(0, '#333');
+ grad.addColorStop(0.5, 'white');
+ grad.addColorStop(1, '#333');
+ ctx.strokeStyle = grad;
+ ctx.lineWidth = radius*0.1;
+ ctx.arc(0, 0, radius, 0, 2*Math.PI);
+
+ ctx.stroke();
+ ctx.beginPath();
+ ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
+ ctx.fillStyle = '#333';
+ ctx.fill();
+}
+
+function drawNumbers(ctx, radius) {
+ var ang;
+ var num;
+ ctx.font = radius*0.15 + "px Helvetica";
+ ctx.textBaseline="middle";
+ ctx.textAlign="center";
+ for(num = 1; num < 13; num++){
+ ang = num * Math.PI / 6;
+ ctx.rotate(ang);
+ ctx.translate(0, -radius*0.85);
+ ctx.rotate(-ang);
+ ctx.fillText(num.toString(), 0, 0);
+ ctx.rotate(ang);
+ ctx.translate(0, radius*0.85);
+ ctx.rotate(-ang);
+ }
+}
+
+function drawTime(ctx, radius){
+ var now = new Date();
+ var hour = now.getHours();
+ var minute = now.getMinutes();
+ var second = now.getSeconds();
+ //hour
+ hour=hour%12;
+ hour=(hour*Math.PI/6)+
+ (minute*Math.PI/(6*60))+
+ (second*Math.PI/(360*60));
+ drawHand(ctx, hour, radius*0.5, radius*0.07);
+ //minute
+ minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
+ drawHand(ctx, minute, radius*0.8, radius*0.07);
+ // second
+ second=(second*Math.PI/30);
+ drawHand(ctx, second, radius*0.9, radius*0.02);
+}
+
+function drawHand(ctx, pos, length, width) {
+ ctx.beginPath();
+ ctx.lineWidth = width;
+ ctx.lineCap = "round";
+ ctx.moveTo(0,0);
+ ctx.rotate(pos);
+ ctx.lineTo(0, -length);
+ ctx.stroke();
+ ctx.rotate(-pos);
+}
+</textarea>
+
+ <textarea id="image_example" style="display: none">
+var image = new Image();
+image.crossOrigin = 'Anonymous';
+image.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Tiger_in_Ranthambhore.jpg/220px-Tiger_in_Ranthambhore.jpg';
+image.onload = function () {
+ ctx.drawImage(image, 0, 0);
+ ctx.end();
+};
+</textarea>
+
+ <iframe style="border: 1px solid #000" width="600" height="400"> </iframe>
+ </body>
 </html>