html5-canvas

Fabrics - How to render free drawing content before mouse up

由 匆匆过客 提交于 2020-01-11 11:20:42
问题 I have a component that is consuming fabricjs canvas content on the event "after:render", this works well with all the functions like adding objects, moving them etc. However when it come to free drawing, the "after:render" event only fire once the drawing is completed, ie on mouse up event. I tried to read the canvas data while the mouse is drawing but with no luck, apparently the contents is not yet rendered onto the canvas during drawing. I understand that from this PR https://github.com

How to reduce the file size created by JSPDF?

由 你说的曾经没有我的故事 提交于 2020-01-11 10:37:14
问题 I'm using jspdf.js to create pdf from HTML 5 canvas. However, regardless of what the contents are and how big the canvas size is, the generated file size is always 32,874 KB, even when the canvas is completey empty. Why the file size is always the same? jsPDF version is 1.1.135. My code is like this: var imgData = canvas.toDataURL("image/jpeg", 1.0); var width = $("canvas").attr('width'); var height = $("canvas").attr('height'); var pdf = new jsPDF('p', 'pt', [width,height]); pdf.addImage

Make moving Rect more smooth

由 穿精又带淫゛_ 提交于 2020-01-11 08:36:08
问题 I want to make "animation" of my Rect more smooth. Currently it's really clunky. I know the reason for it. One of the coordinates becomes wanted value before the other. For example if I'm currently at (0,0) and I need to go to (150,75) and I increment each one equally every second , y-cord will come much sooner than x-cord. var canvas = document.getElementById('canvas'); var ctx = document.getElementById('canvas').getContext('2d'); var aniTimer; var x; var y; var tx = tx || 0; var ty = ty ||

ColorPicker implementation using JavaScript and Canvas

由 时间秒杀一切 提交于 2020-01-11 07:47:29
问题 I'm trying to implement ColorPicker using Canvas just for fun. But i seem lost. as my browser is freezing for a while when it loads due to all these for loops. I'm adding the screenshot of the result of this script: window.onload = function(){ colorPicker(); } function colorPicker(){ var canvas = document.getElementById("colDisp"), frame = canvas.getContext("2d"); var r=0, g=0, b= 0; function drawColor(){ for(r=0;r<255;r++){ for(g=0;g<255;g++){ for(b=0;b<255;b++){ frame.fillStyle="rgb("+r+","

Chart.js: chart not displayed

由 半城伤御伤魂 提交于 2020-01-10 21:45:06
问题 I'd like to use Chart.js to create stunning charts into a webpage. Following the documentation, I wrote the code as follows: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Chart.js demo</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script> </head> <body> <script> var pieData = [ { value: 20, color:"#878BB6" }, { value : 40, color : "#4ACAB4" }, { value : 10, color : "#FF8153" }, { value : 30, color : "

Get X and Y pixel coordinates when iterating over HTML5 canvas getImageData

由 只谈情不闲聊 提交于 2020-01-10 07:56:09
问题 I am iterating over some image data pulled from a canvas like so: var imageData = this.context.getImageData(0, 0, this.el.width, this.el.height); var data = imageData.data; for (var i = data.length; i >= 0; i -= 4) { if (data[i + 3] > 0) { data[i] = this.colour.R; data[i + 1] = this.colour.G; data[i + 2] = this.colour.B; } } How do I calculate the current X and Y pixel coordinates that I am at? 回答1: A Simple Arithmetic Sequence: Divide the linear position by the width. That's your Y

Click in Canvas is three pixels off

由 蹲街弑〆低调 提交于 2020-01-10 05:27:04
问题 I've spent the whole day trying to get a click over my canvas to return the pixel xy offset. What a mission this has been! This is what I've ended up with: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <div id="logX">x</div> <div id="logY">y</div> <div style="margin-left:100px"> <div style="margin-left:100px"> <canvas id="myCanvas" width="100" height="1000" style="border:20px solid

How can we mix canvas stream with audio stream using mediaRecorder [duplicate]

由 妖精的绣舞 提交于 2020-01-10 05:05:12
问题 This question already has answers here : MediaStream Capture Canvas and Audio Simultaneously (2 answers) Closed 3 years ago . I have a canvas stream using canvas.captureStream(). I have another video stream from webrtc video call. Now i want to mix canvas stream with audio tracks of the video stream.How can i do that? 回答1: Use the MediaStream constructor available in Firefox and Chrome 56, to combine tracks into a new stream: let stream = new MediaStream([videoTrack, audioTrack]); The

HTML5, JavaScript and drawing multiple rectangles in a canvas

由 ﹥＞﹥吖頭↗ 提交于 2020-01-10 03:49:33
问题 Why won't my multiple rectangles draw in the canvas? <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.9.1.min.js"></script> </head> <body> <canvas id="myCanvas" width="500" height="500" style="border:1px solid red"> <p>Your browser doesn't support canvas.</p> </canvas> </body> </html> <script type ="text/javascript"> function Shape(x, y, w, h, fill) { this.x = x; this.y = y; this.w = w; this.h = h; this.fill = fill; } // get

Drawing a circle in a canvas on mouseclick

由 ￣綄美尐妖づ 提交于 2020-01-10 03:07:09
问题 I want to draw a filled (or not filled) circle in a canvas on mouseclick, but I can't get my code to work properly, I've tried pretty much everything! This is my HTML: <div id="images"></div> <canvas style="margin:0;padding:0;position:relative;left:50px;top:50px;" id="imgCanvas" width="250" height="250" onclick="draw(e)"></canvas> and my current script: var canvas = document.getElementById("imgCanvas"); var context = canvas.getContext("2d"); function createImageOnCanvas(imageId) { canvas
订阅 html5-canvas