Use html5 canvas to generate an image and save it locally

Front-end code:

[Javascript]
Function drawArrow (angle)
{
// Init canvas
Var canvas = $ ('# cv_arrow') [0];
Var context = canvas. getContext ('2d ');
Var width = canvas. width;
Var height = canvas. height;
Context. clearRect (0, 0, width, height );
 
// Rotate
Var distance = iconSize/2 * Math. sqrt (2) * Math. sin (angle * Math. PI/180/2) * 2;
Var degree = 180-45-(180-angle)/2;
Var x = distance * Math. sin (degree * Math. PI/180 );
Var y = distance * Math. cos (degree * Math. PI/180 );
Context. translate (x,-y );
Var angleInRadians = angle * Math. PI/180;
Context. rotate (angleInRadians );
 
// Draw arrow
Context. fillStyle = 'rgb (0, 0, 0) '; // Black
Context. lineWidth = 1;
Context. strokeStyle = "#000000"; // Black
Context. lineCap = 'round '; // Circle angle
Context. lineJoin = 'round ';
Context. beginPath ();
Context. moveTo (iconSize/2, border );
Context. lineTo (border, iconSize-border );
Context. lineTo (iconSize/2, iconSize/2 );
Context. fill ();
Context. stroke ();
Context. closePath ();
Context. save ();
 
Context. restore ();
Context. fillStyle = 'rgb (255,255,255) '; // White
Context. lineWidth = 1;
Context. strokeStyle = "#000000 ";
Context. lineCap = 'round ';
Context. lineJoin = 'round ';
Context. beginPath ();
Context. moveTo (iconSize/2, border );
Context. lineTo (iconSize-border, iconSize-border );
Context. lineTo (iconSize/2, iconSize/2 );
Context. fill ();
Context. stroke ();
Context. closePath ();
Context. save ();
 
_ Canvas = canvas;
}
Code sent to the background:

[Javascript]
For (var I = 0; I <360; I ++)
{
DrawArrow (1 );
 
Var data = _ canvas. toDataURL ();
 
// The prompt message before deleting the string "data: image/png; base64 ,"
Var b64 = data. substring (22 );
 
$. Ajax ({url: "RotateCanvas. aspx", data: {data: b64, name: I. toString ()}, success:
Function ()
{
// Alert ('OK ');
}
});
}
Code received in the background:

[Csharp]
If (Request ["name"]! = Null)
{
String name = Request ["name"];
String savePath = Server. MapPath ("~ /Images/output /");
 
Try
{
FileStream fs = File. Create (savePath + "/" + name + ". png ");
Byte [] bytes = Convert. FromBase64String (Request ["data"]);
 
Fs. Write (bytes, 0, bytes. Length );
Fs. Close ();
}
Catch (Exception ex)
{
}
}
The final result is as follows:

 

The image generation is good, non-distorted, and transparent, and does not require post processing.