New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Drawing

Currently all modern browsers support the canvas tag very well (Mozilla, Chrome, Opera, IE9+).
  • Save Image
  • Undo
  • Redo
  • Reset Changes
  • Pencil
  • DrawCircle
  • DrawRectangle
  • Line
Zoom:100%Size:0x0pxPos.:(-,-)Last Action:None

Telerik's ASP.NET ImageEditor control leverages the 2D context of the canvas tag to offer tools for drawing circles, rectangles, lines and pencil strokes in different colors. You can enable the tools with the following CommandNames:

  • Pencil
  • Line
  • DrawCircle
  • DrawRectangle

Note, that the Drawing tools are not among the tools loaded by default in the ImageEditor. In order to use them you will need to define an ImageEditorTool using the above mentioned CommandNames.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Title="" Language="C#"  AutoEventWireup="true"
    CodeFile="DefaultCS.aspx.cs" Inherits="ImageEditor_Examples_Drawing_DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="../../common/styles.css" rel="stylesheet" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <qsf:MessageBox ID="InformationBox1" runat="server" Type="Info" Icon="Info">
            Currently all modern browsers support the canvas tag very well (Mozilla, Chrome,
        Opera, IE9+).
    </qsf:MessageBox>
    <div class="demo-container size-wide">
        <telerik:RadImageEditor RenderMode="Lightweight" ID="RadImageEditor1" runat="server" ImageUrl="~/ImageEditor/images/hay.jpg" Width="790" Height="430px">
            <Tools>
                <telerik:ImageEditorToolGroup>
                    <telerik:ImageEditorTool CommandName="Save"></telerik:ImageEditorTool>
                    <telerik:ImageEditorToolSeparator></telerik:ImageEditorToolSeparator>
                    <telerik:ImageEditorToolStrip CommandName="Undo">
                    </telerik:ImageEditorToolStrip>
                    <telerik:ImageEditorToolStrip CommandName="Redo">
                    </telerik:ImageEditorToolStrip>
                    <telerik:ImageEditorTool CommandName="Reset"></telerik:ImageEditorTool>
                    <telerik:ImageEditorToolSeparator></telerik:ImageEditorToolSeparator>
                    <telerik:ImageEditorTool CommandName="Pencil"></telerik:ImageEditorTool>
                    <telerik:ImageEditorTool CommandName="DrawCircle"></telerik:ImageEditorTool>
                    <telerik:ImageEditorTool CommandName="DrawRectangle"></telerik:ImageEditorTool>
                    <telerik:ImageEditorTool CommandName="Line"></telerik:ImageEditorTool>
                </telerik:ImageEditorToolGroup>
            </Tools>
        </telerik:RadImageEditor>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance