Leaderboard

By adding these lines you can export the canvas data to the server: uses NetEncoding; procedure TMainForm.UniButton1Click(Sender: TObject); begin uniSession.AddJS('ajaxRequest(MainForm.form, [''export''], { data: canvas.toDataURL() } );'); end; procedure TMainForm.UniFormAjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings); var inStream, outStream:TStringStream; begin if sameText(eventName,'export') then begin inStream:=TStringStream.Create; outStream:=TStringStream.Create; inStream.writeString(params.Values['data']); inStream.position:=22; TNetEncoding.Base64.Decode(inStream, outStream); outStream.position:=0; uniImage1.Picture.LoadFromStream(outStream); uniImage1.Picture.SaveToFile('image.png'); inStream.Free; outStream.Free; end; end; Update: moved beginPath and closePath to mouseDown and mouseUp, for more fluid drawing. For clearing the canvas use: uniSession.AddJS('ctx.clearRect(0, 0, canvas.width, canvas.height);'); mousemove_ex.zip

Hello, You need to set UniMainModule -> RecallLastTheme to True.

Attached is a sample application to give you an idea, for simple freehand drawing, based on this JS in an HTMLFrame: <canvas id="mycanvas" width="1200" height="500" style="border:1px solid #000000;"> <script type="text/javascript"> var canvas = $('#mycanvas')[0]; var ctx = canvas.getContext("2d"); var mDown = false; var X, Y, oldX, oldY = 0; function relMouseCoords(event){ var totalOffsetX = 0; var totalOffsetY = 0; var canvasX = 0; var canvasY = 0; var currentElement = this; do{ totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft; totalOffsetY += currentElement.offsetTop - currentElement.scrollTop; } while(currentElement = currentElement.offsetParent); canvasX = event.pageX - totalOffsetX; canvasY = event.pageY - totalOffsetY; return {x:canvasX, y:canvasY} } HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords; $("#mycanvas").mousemove(function(event){ event.stopPropagation(); if(mDown){ coords = canvas.relMouseCoords(event); X = coords.x; Y = coords.y; ctx.moveTo(oldX, oldY); ctx.lineTo(X, Y); ctx.stroke(); oldX = X; oldY = Y; } }); $("#mycanvas").mousedown(function(event){ event.stopPropagation(); if(mDown)return; mDown = true; coords = canvas.relMouseCoords(event); oldX = coords.x; oldY = coords.y; ctx.strokeStyle = 0; ctx.lineWidth =1; ctx.lineCap = 'square'; ctx.beginPath(); }); $("#mycanvas").mouseup(function(event){ mDown = false; ctx.closePath(); }); </script> mousemove.zip