Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 
0 Kudos

The code comes from

1. Create a new BSP application with one page:

Paste the code below into main.htm:
<!doctype html>
<meta charset="utf-8" />
<title>Canvas Test</title>
<canvas id="canvas1" width="400" height="300"></canvas>
<script type="text/javascript" src="test.js"></script>
var img = new Image();
img.src = 'p1.jpg';
img.onload = init();

2. import the following JavaScript code as MIME type test.js to BSP application:
function MyCtx(ctx){
this.ctx = ctx;
(function (map){
for(var k in map){
MyCtx.prototype[k] = new Function('this.ctx.'+map[k]+'.apply(this.ctx,arguments); return this;');
B:'beginPath', M:'moveTo', L:'lineTo', A:'arc', Z:'closePath', f:'fill', dI:'drawImage', cR:'clearRect', clip:'clip', save:'save', restore:'restore'
function init(){
var ctx = document.getElementById("canvas1").getContext('2d');
var mtx = new MyCtx(ctx), i=-1;
function f(){,0,0).B().A(200,150,250,Math.abs(++i%100)*Math.PI/50,Math.PI*2,(i/100|0)%2).L(200,150).Z().clip().dI(img,-400,0).restore();

3. Import the attached picture into MIME.

Test the application in Chrome: