function loadAndViewImage(imageId) {
    var element = document.getElementById('demo-element');
    try {
        var start = new Date().getTime();
        cornerstone.loadAndCacheImage(imageId).then(function(image) {
            var viewport = cornerstone.getDefaultViewportForImage(element, image);
            cornerstone.displayImage(element, image, viewport);
            if(loaded === false) {
                cornerstoneTools.mouseInput.enable(element);
                cornerstoneTools.mouseWheelInput.enable(element);
                cornerstoneTools.wwwc.activate(element, 1); // ww/wc is the default tool for left mouse button
                loaded = true;
            }
            document.getElementById('btndeactivatewwwc').addEventListener('click', function(e) {
               cornerstoneTools.wwwc.deactivate(element, 1);
               cornerstoneTools.arrowannotate.activate(element, 1); // activate arrowannotate here, but not work.
            });
        }, function(err) {
            alert(">>" + err);
        });
    }
    catch(err) {
        alert(err);
    }
}