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

Canvas Support

Currently all modern browsers support the canvas tag very well (Mozilla, Chrome, Opera, IE9+).
  • Print Image
  • Save Image
  • Export Image
  • Undo
  • Redo
  • Reset Changes
  • Crop
  • Resize
  • Zoom
  • Zoom In
  • Zoom Out
  • Opacity
  • Rotate
  • Rotate Right by 90 deg
  • Rotate Left by 90 deg
  • Flip
  • Flip Vertically
  • Flip Horizontally
  • Add Text
  • Insert Image
  • Brightness/Contrast
  • Blur
  • Sharpen
  • Invert Colors (negative)
  • Sepia
  • Greyscale
  • Hue/Saturation
  • Pencil
  • DrawCircle
  • DrawRectangle
  • Line
Zoom:100%Size:0x0pxPos.:(-,-)Last Action:None
  • Demo Configurator

Choose Mode

The canvas tag, as part of the HTML5 specification, gives you an easy and powerful way to draw and manipulate graphics using JavaScript. You will be very impressed of the productivity and capabilities of the canvas tag in modern browsers as well as of the ability to edit the image without the unnecessary going back and forth to the server.

You could control the mode of the ImageEditor through its CanvasMode property (with a value set to "Yes" or "No"). By default the CanvasMode is "Automatic", where the ImageEditor control tries to use the CanvasMode. However if the browser does not support it, then it falls back to ImageMode automatically.

All the functionality of the ImageEditor is now implemented through <canvas> as a rendering engine. This improves significantly the functionality of the control as before all the operations were managed through the server and now they are handled on the client. Thanks to the canvas functionality now the ImageEditor has the following filters: Invert Color, Brightness and Contrast, Blur, Sharpen, Sepia and Greyscale. Also it provides a Drawing functionality.

Note, that the canvas Filters and 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 with a CommandName set to "InvertColor", "BrightnessContrast", "Sepia", "Greyscale", "Pencil", "Line", "DrawCircle" or "DrawRectangle".

Since Q3 2014 RadImageEditor provides two more filters: "Blur" and "Sharpen".

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
  • CanvasMode.xml
    • CanvasMode.xml
    • ImageMode.xml
<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="DefaultCS.aspx.cs" Inherits="ImageEditor_Examples_CanvasSupport_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" />
    <link href="styles.css" rel="stylesheet" />
</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-containers">
    <div class="demo-container">
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
            <telerik:RadImageEditor RenderMode="Lightweight" ID="RadImageEditor1" runat="server" ImageUrl="~/ImageEditor/images/oranges.jpg"
                CanvasMode="Yes" Width="1080px" Height="430px">
            </telerik:RadImageEditor>
        </telerik:RadAjaxPanel>
    </div>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View>
                <qsf:RadioButtonList ID="RadiosTools" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadiosTools_SelectedIndexChanged"
                    Label="Choose Mode">
                        <asp:ListItem Text="Canvas Mode" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Image Mode"></asp:ListItem>
                    </qsf:RadioButtonList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance