ImageEditor - 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
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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>

Find Assistance

Help Us Improve

Was this example helpful?