var shapeResolution=3; function initShapeDialog() { $("#btnShapeOk").on("onButtonClick",onShapeOk); $("#btnShapeCancel").on("onButtonClick",onShapeCancel); $("#btnShapePlus").on("onButtonHold",onShapePlus); $("#btnShapeMin").on("onButtonHold",onShapeMin); updateShapePreview(); } function showShapeDialog() { showPopup(popupShape); } function onShapeCancel() { hidePopup(popupShape); } function onShapeOk() { hidePopup(popupShape); var res = shapeResolution; if (res!=undefined) { if (isNaN(res)) res=3; if (res<2) res=2; if (res>100) res=100; drawCircle(canvasWidth/2,canvasHeight/2,80,res); } } function onShapePlus() { shapeResolution++; if (shapeResolution>50) shapeResolution=50; updateShapePreview(); } function onShapeMin() { shapeResolution--; if (shapeResolution<2) shapeResolution=2; updateShapePreview(); } function updateShapePreview() { $(".lblShapeResolution").text(shapeResolution + " sides"); var canvas = $("#shapePreview")[0]; var c = canvas.getContext('2d'); var w = canvas.width; var h = canvas.height; console.log(w,h); var r = w/2 - 20; var x0 = w/2; var y0 = h/2; var res = shapeResolution; var step = Math.PI * 2.0 / res; c.save(); c.clearRect(0,0,canvas.width, canvas.height); c.restore(); c.beginPath(); for (var a=0; a